import {
  Plane,
  PaintbrushIcon as PaintBrush,
  Hourglass,
  Hammer,
  Camera,
  PenTool,
  Scissors,
  type LucideIcon,
} from "lucide-react";

type InterestIconProps = {
  icon: string;
  color: string;
  label: string;
};

const iconMap: Record<string, LucideIcon> = {
  plane: Plane,
  paintbrush: PaintBrush,
  hourglass: Hourglass,
  hammer: Hammer,
  camera: Camera,
  "pen-tool": PenTool,
  scissors: Scissors,
};

const colorMap: Record<string, string> = {
  blue: "bg-[#1B34BC]",
  pink: "bg-[#F62FD6]",
  red: "bg-[#EF2424]",
  green: "bg-[#13E234]",
  yellow: "bg-[#F6E123]",
  teal: "bg-[#0C827B]",
  indigo: "bg-[#2E275C]",
};

export default function InterestIcon({
  icon,
  color,
  label,
}: InterestIconProps) {
  const Icon = iconMap[icon] || Plane;
  const bgColor = colorMap[color] || "bg-gray-400";

  return (
    <div className="flex flex-col">
      <div
        className={`${bgColor} h-14 w-14 rounded-full flex items-center justify-center text-white mb-2`}
      >
        <Icon className="h-7 w-7" />
      </div>
      <span className="text-xs text-left leading-tight font-semibold">{label}</span>
    </div>
  );
}
