import React, { useMemo } from 'react';
import {
  FaUser, FaBirthdayCake, FaRulerVertical, FaWeight, FaHeart,
  FaVial, FaFlag, FaBriefcase, FaPrayingHands
} from 'react-icons/fa';

interface AboutMeProps {
  aboutMe: any;
}

const iconStyles = 'text-white text-lg';
const bgColors = [
  'bg-red-500', 'bg-blue-500', 'bg-green-500',
  'bg-yellow-500', 'bg-purple-500', 'bg-pink-500',
  'bg-indigo-500', 'bg-orange-500'
];

// Stable hash-based color picker
const getStableColorClass = (label: string) => {
  let hash = 0;
  for (let i = 0; i < label.length; i++) {
    hash = label.charCodeAt(i) + ((hash << 5) - hash);
  }
  const index = Math.abs(hash % bgColors.length);
  return bgColors[index];
};

const InfoItem = ({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) => {
  const bgColor = useMemo(() => getStableColorClass(label), [label]);

  return (
    <div className="flex items-center gap-4 flex-wrap my-3">
      <div className={`w-9 h-9 flex items-center justify-center rounded-full ${bgColor}`}>
        {icon}
      </div>
      <p className="text-sm text-gray-700 font-medium capitalize">
        {label}: <span className=" bg-gray-200 rounded-[1rem] py-1 px-1.5 text-[0.75rem]">{value}</span>
      </p>
    </div>
  );
};

const AboutMe = ({ aboutMe }: AboutMeProps) => {
  return (
    <div>
      <InfoItem icon={<FaUser className={iconStyles} />} label="Gender" value={aboutMe?.gender} />
      <InfoItem icon={<FaBirthdayCake className={iconStyles} />} label="Age" value={aboutMe?.age} />
      <InfoItem icon={<FaRulerVertical className={iconStyles} />} label="Height Range" value={aboutMe?.height_range} />
      <InfoItem icon={<FaWeight className={iconStyles} />} label="Weight Range" value={aboutMe?.weight_range} />
      <InfoItem icon={<FaHeart className={iconStyles} />} label="Marital Status" value={aboutMe?.marital_status} />
      <InfoItem icon={<FaVial className={iconStyles} />} label="Genotype" value={aboutMe?.genotype} />
      <InfoItem icon={<FaFlag className={iconStyles} />} label="Nationality" value={aboutMe?.nationality} />
      <InfoItem icon={<FaBriefcase className={iconStyles} />} label="Occupation" value={aboutMe?.occupation} />
      <InfoItem
        icon={<FaPrayingHands className={iconStyles} />}
        label="Religion"
        value={`${aboutMe?.religion?.[0]?.religion || ''}, ${aboutMe?.religion?.[0]?.denomination || ''}`}
      />
    </div>
  );
};

export default AboutMe;
