import type { ActivityField } from '@/admin/api/activities';
import { __ } from '@wordpress/i18n';
import { BLOCK_TYPE_MAP, PICKER_CATEGORIES } from './types';

const InlineBlockPicker = ({ onSelect }: { onSelect: (type: ActivityField['type']) => void }) => (
	<div className="w-[320px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
		<div className="border-b border-gray-100 px-4 py-2.5 text-[11px] font-bold uppercase tracking-widest text-gray-500">
			{__('Add a block', 'allcoach')}
		</div>
		<div className="max-h-[360px] overflow-y-auto py-1.5">
			{PICKER_CATEGORIES.map((cat, ci) => (
				<div key={ci}>
					{cat.label && (
						<div className="px-4 pb-1 pt-2 text-[10px] font-bold uppercase tracking-widest text-teal-600">
							{cat.label}
						</div>
					)}
					{cat.types.map((type) => {
						const meta = BLOCK_TYPE_MAP[type];
						return (
							<button
								key={type}
								type="button"
								onMouseDown={(e) => { e.preventDefault(); onSelect(type); }}
								className="flex w-full items-center gap-3 px-4 py-2 text-left transition-colors hover:bg-gray-50"
							>
								<div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-gray-100 bg-gray-50 text-gray-600">
									<meta.icon className="size-4" />
								</div>
								<div className="min-w-0">
									<div className="text-[13px] font-medium text-gray-800">{meta.label}</div>
									<div className="text-[11px] text-gray-400">{meta.description}</div>
								</div>
							</button>
						);
					})}
				</div>
			))}
		</div>
	</div>
);

export default InlineBlockPicker;