import {
	Flag,
	Shield,
	MapPin,
	Home,
	Package,
	Handshake,
	Wrench,
	Zap,
	BarChart3,
	FileText,
} from 'lucide-react';

const ICON_MAP = {
	flag: Flag,
	shield: Shield,
	'map-pin': MapPin,
	home: Home,
	package: Package,
	handshake: Handshake,
	wrench: Wrench,
	zap: Zap,
	chart: BarChart3,
	'file-text': FileText,
};

/**
 * FocusAreaIcon
 *
 * Renders a colored rounded-square icon for a Focus Area.
 * Uses Lucide icons with the FA's brand color as background.
 */
const FocusAreaIcon = ({ icon, color, size = 'md' }) => {
	const Icon = ICON_MAP[icon] || Flag;

	const sizes = {
		sm: 'w-8 h-8',
		md: 'w-10 h-10',
		lg: 'w-12 h-12',
	};

	const iconSizes = {
		sm: 16,
		md: 20,
		lg: 24,
	};

	return (
		<div
			className={`${sizes[size]} rounded-lg flex items-center justify-center shrink-0`}
			style={{ backgroundColor: `${color}15` }}
		>
			<Icon size={iconSizes[size]} style={{ color }} strokeWidth={2} />
		</div>
	);
};

export default FocusAreaIcon;