import {
	Wrench,
	MapPin,
	Home,
	Package,
	FileText,
	Flag,
	BarChart3,
	Tag,
} from 'lucide-react';
import { getAreaName } from '@/hooks/useTimeline';

/** Focus-area key → chip icon. */
const AREA_ICON = {
	technical: Wrench,
	local: MapPin,
	homepage: Home,
	'services-products': Package,
	'content-strategy': FileText,
	contact: Flag,
	'site-status': BarChart3,
};

/**
 * Small area pill (e.g. "🏠 Homepage"). Resolves the label from the focus-area
 * key and renders nothing when the key is empty. Pass `className` to control the
 * display utility (e.g. "hidden sm:inline-flex" to hide on narrow widths).
 */
const AreaChip = ({ areaKey, className = 'inline-flex' }) => {
	const areaName = getAreaName(areaKey);
	if (!areaName) return null;
	const Icon = AREA_ICON[areaKey] || Tag;
	return (
		<span
			className={`${className} items-center gap-1.5 rounded-full border border-border px-2.5 py-1 small-regular text-muted-foreground whitespace-nowrap`}
		>
			<Icon className="w-3.5 h-3.5" />
			{areaName}
		</span>
	);
};

export default AreaChip;