'use client'

import React, { JSX, useMemo } from 'react';
import {
  FaBook, FaPlane, FaUtensils, FaSwimmer, FaGamepad, FaBicycle, FaMusic, FaPencilAlt,
  FaCamera, FaHiking, FaPenFancy, FaFilm, FaLeaf, FaSeedling, FaTheaterMasks, FaPaintBrush,
  FaFish, FaSpa, FaHandRock, FaHandsHelping, FaChessKnight, FaFeatherAlt, FaGlobe,
  FaRunning, FaPrayingHands, FaTools, FaBlog, FaPodcast, FaStar, FaWater, FaBullseye,
  FaMugHot, FaLaugh, FaMagic, FaCity, FaQuestionCircle,
} from 'react-icons/fa';

interface HobbyProps {
  hobbie: any;
}

const hobbyIcons: Record<string, JSX.Element> = {
  reading: <FaBook />,
  traveling: <FaPlane />,
  cooking: <FaUtensils />,
  swimming: <FaSwimmer />,
  gaming: <FaGamepad />,
  cycling: <FaBicycle />,
  dancing: <FaMusic />,
  drawing: <FaPencilAlt />,
  photography: <FaCamera />,
  hiking: <FaHiking />,
  writing: <FaPenFancy />,
  'watching movies': <FaFilm />,
  'listening to music': <FaMusic />,
  gardening: <FaLeaf />,
  singing: <FaMusic />,
  crafting: <FaTools />,
  fishing: <FaFish />,
  yoga: <FaSpa />,
  'martial arts': <FaHandRock />,
  volunteering: <FaHandsHelping />,
  'collecting antiques': <FaChessKnight />,
  'bird watching': <FaFeatherAlt />,
  'board games': <FaChessKnight />,
  knitting: <FaFeatherAlt />,
  'learning languages': <FaGlobe />,
  painting: <FaPaintBrush />,
  'playing musical instruments': <FaMusic />,
  chess: <FaChessKnight />,
  running: <FaRunning />,
  meditation: <FaPrayingHands />,
  'diy projects': <FaTools />,
  blogging: <FaBlog />,
  podcasting: <FaPodcast />,
  astronomy: <FaStar />,
  'scuba diving': <FaWater />,
  archery: <FaBullseye />,
  pottery: <FaMugHot />,
  'stand-up comedy': <FaLaugh />,
  'magic tricks': <FaMagic />,
  'urban exploration': <FaCity />,
};

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

// hash a string to a consistent index
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 HobbyComponent = ({ hobbie }: HobbyProps) => {
  const label = typeof hobbie === 'string' ? hobbie : hobbie?.label || '';
  const lowerLabel = label.toLowerCase();

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

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

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        marginBottom: '8px',
        flexDirection: 'column',
      }}
    >
      <div
        style={{
          backgroundColor: bgColor,
          color: '#fff',
          width: '50px',
          height: '50px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius: '50%',
          fontSize: '20px',
        }}
      >
        {icon}
      </div>
      <p className="text-sm capitalize">{label}</p>
    </div>
  );
};

export default HobbyComponent;
