'use client'

import React, { JSX, useMemo } from 'react';
import {
  FaLaptop, FaFutbol, FaHeartbeat, FaPalette, FaMusic, FaFlask, FaFilm, FaPlane,
  FaUtensils, FaBriefcase, FaCamera, FaBook, FaLandmark, FaTwitter, FaGamepad,
  FaGraduationCap, FaBrain, FaLeaf, FaPaw, FaGlobe, FaNewspaper, FaTshirt,
  FaUser, FaPrayingHands, FaRobot, FaSun, FaRocket, FaMicroscope, FaCoins,
  FaRecycle, FaSmile, FaBalanceScale, FaLightbulb, FaCity, FaMortarPestle,
  FaUsers, FaCogs, FaVrCardboard, FaCompress, FaQuestionCircle,
} from 'react-icons/fa';

interface InterestProps {
  interest: string | { label: string; value?: string };
}

const interestIcons: Record<string, JSX.Element> = {
  technology: <FaLaptop />,
  sports: <FaFutbol />,
  'health & fitness': <FaHeartbeat />,
  'art & design': <FaPalette />,
  music: <FaMusic />,
  science: <FaFlask />,
  'movies & tv shows': <FaFilm />,
  travel: <FaPlane />,
  'food & drink': <FaUtensils />,
  'business & finance': <FaBriefcase />,
  photography: <FaCamera />,
  history: <FaBook />,
  literature: <FaBook />,
  politics: <FaLandmark />,
  'social media': <FaTwitter />,
  gaming: <FaGamepad />,
  education: <FaGraduationCap />,
  psychology: <FaBrain />,
  'nature & environment': <FaLeaf />,
  'animals & pets': <FaPaw />,
  'culture & society': <FaGlobe />,
  'current affairs': <FaNewspaper />,
  'fashion & beauty': <FaTshirt />,
  'self-improvement': <FaUser />,
  spirituality: <FaPrayingHands />,
  'artificial intelligence': <FaRobot />,
  'renewable energy': <FaSun />,
  'space exploration': <FaRocket />,
  neuroscience: <FaMicroscope />,
  blockchain: <FaCoins />,
  'sustainable living': <FaRecycle />,
  'mental health awareness': <FaSmile />,
  'human rights': <FaBalanceScale />,
  entrepreneurship: <FaLightbulb />,
  architecture: <FaCity />,
  'culinary arts': <FaMortarPestle />,
  anthropology: <FaUsers />,
  robotics: <FaCogs />,
  'virtual reality': <FaVrCardboard />,
  minimalism: <FaCompress />,
};

const bgColors = ['#FF6B6B', '#6BCB77', '#4D96FF', '#FFD93D', '#845EC2'];

const getStableColor = (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 InterestComponent = ({ interest }: InterestProps) => {
  const label = typeof interest === 'string' ? interest : interest?.label || '';
  const lowerLabel = label.toLowerCase();

  const icon = interestIcons[lowerLabel] || <FaQuestionCircle />;

  const bgColor = useMemo(() => getStableColor(lowerLabel), [lowerLabel]);

  return (
    <div className="flex flex-col items-center gap-3 mb-2">
      <div
        className="flex justify-center items-center rounded-full w-12 h-12 text-white text-xl"
        style={{ backgroundColor: bgColor }}
      >
        {icon}
      </div>
      <p className="text-sm text-center capitalize">{label}</p>
    </div>
  );
};

export default InterestComponent;
