import React from "react";
import {
  FaVenusMars,
  FaBirthdayCake,
  FaGlobeAfrica,
  FaRulerVertical,
  FaWeight,
  FaVial,
  FaHeart,
  FaFlag,
  FaMapMarkerAlt,
  FaPrayingHands,
} from "react-icons/fa";

interface PreferredMatchProps {
  item: any;
}

const randomBg = () => {
  const colors = [
    "bg-red-500",
    "bg-blue-500",
    "bg-green-500",
    "bg-yellow-500",
    "bg-purple-500",
    "bg-pink-500",
    "bg-indigo-500",
    "bg-orange-500",
    "bg-teal-500",
    "bg-rose-500",
  ];
  return colors[Math.floor(Math.random() * colors.length)];
};

const iconBox = (Icon: any) => (
  <div
    className={`w-8 h-8 flex items-center justify-center rounded-full text-white ${randomBg()}`}
  >
    <Icon size={16} />
  </div>
);

// Utility to safely extract label from value
const getLabel = (item: any) => {
  if (!item) return "";
  if (typeof item === "string") return item;
  return item.label || item.value || "";
};

const PreferredMatch = ({ item }: PreferredMatchProps) => {
  const renderRedPills = (values: any[]) =>
    values?.map((val, idx) => (
      <span
        key={idx}
        className="bg-gray-200 rounded-[1rem] py-1 px-1.5 text-black mr-1 text-[0.75rem]"
      >
        {getLabel(val)}
      </span>
    ))

  return (
    <div className="space-y-4 text-sm">
      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaVenusMars)}
        <p className="font-semibold">Gender:</p>
            <p className="bg-gray-200 rounded-[1rem] py-1 px-1.5 text-black mr-1 text-[0.75rem]">
              
        {Array.isArray(item?.gender?.[0])
          ? item.gender[0].filter(Boolean).join(", ")
          : item?.gender?.[0] || "N/A"}
        
      </p>

      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaBirthdayCake)}
        <p className="font-semibold">Age Range:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.age_range)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaGlobeAfrica)}
        <p className="font-semibold">Ethnicity:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.ethnicity)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaRulerVertical)}
        <p className="font-semibold">Height Range:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.height_range)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaWeight)}
        <p className="font-semibold">Weight Range:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.weight_range)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaVial)}
        <p className="font-semibold">Genotype:</p>
        <div className="flex gap-2 flex-wrap uppercase">{renderRedPills(item?.genotype)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaHeart)}
        <p className="font-semibold">Marital Status:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.marital_status)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaFlag)}
        <p className="font-semibold">Nationality:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.nationality)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaMapMarkerAlt)}
        <p className="font-semibold">State:</p>
        <div className="flex gap-2 flex-wrap capitalize">{renderRedPills(item?.state)}</div>
      </div>

      <div className="flex items-center gap-3 flex-wrap">
        {iconBox(FaPrayingHands)}
        <p className="font-semibold">Religions:</p>
        <div className="flex gap-2 flex-wrap capitalize">
          {item?.religions?.map((religion: any, idx: number) =>
            religion?.religion ? (
              <span
                key={idx}
                className="bg-gray-200 rounded-[1rem] py-1 px-1.5 text-black text-[0.75rem]"
              >
                {`${religion.religion} (${religion?.denomination || 'N/A'})`}
              </span>
            ) : null
          )}
        </div>
      </div>
    </div>
  );
};

export default PreferredMatch;
