import {
  Umbrella,
  Bike,
  Soup,
  Music,
  Landmark,
  type LucideIcon,
} from "lucide-react";

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

const iconMap: Record<string, LucideIcon> = {
  umbrella: Umbrella,
  bike: Bike,
  soup: Soup,
  music: Music,
  landmark: Landmark,
};

const colorMap: Record<string, string> = {
  green: "bg-green-400",
  red: "bg-[#BC1B1B]",
  yellow: "bg-[#F6E123]",
  purple: "bg-[#9747FF]",
  cyan: "bg-[#2DE9F5]",
};

export default function HobbyIcon({ icon, color, label }: HobbyIconProps) {
  const Icon = iconMap[icon] || Umbrella;
  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>
  );
}
