import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

export default function DeputyGroup({
  text,
  route,
  background,
  index,
}: {
  text: string;
  route: string;
  background: string;
  index?: number;
}) {
  const [hovered, setHovered] = useState(false);
  const navigate = useNavigate();

  const bgStyle = hovered
    ? {
        backgroundImage: `linear-gradient(180deg, rgba(0, 175, 221, 0.22) 0%, rgba(0, 30, 49, 0.94) 100%), url(${background})`,
      }
    : {
        backgroundImage: `linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 45, 75, 0.88) 100%), url(${background})`,
      };

  const formattedNum =
    index !== undefined
      ? index + 1 < 10
        ? `0${index + 1}`
        : `${index + 1}`
      : null;

  return (
    <div
      className="relative w-full h-[200px] md:h-[220px] rounded-2xl overflow-hidden bg-cover bg-center bg-no-repeat cursor-pointer border border-white/15 hover:border-[#00AFDD]/80 shadow-xl transition-all duration-300 transform hover:-translate-y-2 active:scale-[0.97] hover:shadow-[0_12px_28px_rgba(0,175,221,0.22)] group flex flex-col justify-between p-6 backdrop-blur-md"
      style={bgStyle}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => navigate(route)}
    >
      {/* Number Badge */}
      <div className="flex justify-between items-center w-full z-10">
        {formattedNum && (
          <span className="text-xs font-mono font-bold text-[#00AFDD] bg-[#001E31]/80 px-3 py-1 rounded-full border border-[#00AFDD]/40 backdrop-blur-md">
            {formattedNum}
          </span>
        )}
      </div>

      {/* Title & Action Arrow */}
      <div className="relative z-10 flex justify-between items-end space-x-3">
        <h3 className="text-sm md:text-base text-white uppercase font-extrabold tracking-wider leading-snug group-hover:text-[#00AFDD] transition-colors drop-shadow-md flex-1">
          {text}
        </h3>
        <ArrowForwardIcon
          className="text-[#00AFDD] group-hover:translate-x-1.5 transition-transform flex-shrink-0 mb-0.5"
          sx={{ fontSize: 22 }}
        />
      </div>
    </div>
  );
}