import { __ } from "@wordpress/i18n";
import "./editor.scss";

import {
	useBlockProps,
	RichText,
	InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody } from "@wordpress/components";
import mascotte from "./img/homegrade_mascotte.svg";
import { Tip } from "@wordpress/components";
export default function Edit({ attributes, setAttributes, ...props }) {
	let { name, position } = attributes;

	function onChangeName(name) {
		setAttributes({ name });
	}
	function onChangePosition(position) {
		setAttributes({ position });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody>
					<Tip>
						Si besoin, Utilisez le champ "Légende"de la médiathèque pour
						afficher un copyright
					</Tip>
					<Tip>
						Si besoin, Utilisez le champ "Description" de la médiathèque pour
						donner afficher une description de votre image
					</Tip>
				</PanelBody>
			</InspectorControls>

			<li
				{...useBlockProps({
					className: `homegrade-blocks-staff-member`,
				})}
			>
				<div className="homegrade-blocks-staff-member__member-icon">
					<img src={mascotte} alt="" />
				</div>
				<div className="homegrade-blocks-staff-member__member-informations">
					<RichText
						className="homegrade-blocks-staff-member__name"
						tagName="h4"
						placeholder="Nom"
						value={name}
						onChange={onChangeName}
					/>
					<RichText
						className="homegrade-blocks-staff-member__position"
						tagName="p"
						placeholder="Fonction"
						value={position}
						onChange={onChangePosition}
					/>
				</div>
			</li>
		</>
	);
}