import { useDraggable } from '@dnd-kit/core';

function PaletteItem( { blockType, definition } ) {
	const { attributes, listeners, setNodeRef, isDragging } = useDraggable( {
		id: `palette-${ blockType }`,
		data: { type: 'palette', blockType },
	} );

	return (
		<div
			ref={ setNodeRef }
			className={ `aic-palette-item ${ isDragging ? 'aic-palette-item--dragging' : '' }` }
			{ ...listeners }
			{ ...attributes }
		>
			<span className={ `dashicons dashicons-${ definition.icon || 'block-default' }` } />
			<span>{ definition.label }</span>
		</div>
	);
}

export default function BlockPalette( { definitions } ) {
	return (
		<div className="aic-palette">
			<h3>Content Blocks</h3>
			<p className="aic-palette-hint">Drag blocks onto the canvas</p>
			{ Object.entries( definitions ).map( ( [ type, def ] ) => (
				<PaletteItem key={ type } blockType={ type } definition={ def } />
			) ) }
		</div>
	);
}