import {
  User,
  Calendar,
  Briefcase,
  Heart,
  MapPin,
  Ruler,
  Weight,
  BookOpen,
  Flag,
  type LucideIcon,
} from "lucide-react";

type AboutMeItemProps = {
  icon: string;
  color: string;
  label: string;
  value: string;
};

const iconMap: Record<string, LucideIcon> = {
  user: User,
  calendar: Calendar,
  briefcase: Briefcase,
  heart: Heart,
  "map-pin": MapPin,
  ruler: Ruler,
  weight: Weight,
  book: BookOpen,
  flag: Flag,
};

const colorMap: Record<string, string> = {
  red: "bg-red-500",
  blue: "bg-blue-500",
  yellow: "bg-yellow-400",
  purple: "bg-purple-500",
  violet: "bg-violet-500",
  green: "bg-green-500",
};

export default function AboutMeItem({
  icon,
  color,
  label,
  value,
}: AboutMeItemProps) {
  const Icon = iconMap[icon] || User;
  const bgColor = colorMap[color] || "bg-gray-400";

  return (
    <div className="flex items-center gap-3">
      <div
        className={`${bgColor} h-8 w-8 rounded-full flex items-center justify-center text-white shrink-0`}
      >
        <Icon className="h-4 w-4" />
      </div>
      <div className="flex items-center gap-2">
        <span className="text-gray-600 font-medium">{label}</span>
        <span className="font-medium">{value}</span>
      </div>
    </div>
  );
}
