import React from 'react';
import { useNavigate } from 'react-router-dom';

interface FlipCardLink {
  id: string;
  label: string;
  route: string;
  visible?: boolean;
}

interface FlipCardProps {
  title: string;
  links: FlipCardLink[];
  icon: React.ReactNode;
}

const FlipCard: React.FC<FlipCardProps> = ({ title, links, icon }) => {
  const navigate = useNavigate();

  const visibleLinks = links.filter(link => link.visible !== false);

  return (
    <div className="w-full sm:w-[230px] h-[120px] perspective-1000 m-2.5">
      <div className="relative w-full h-full transition-transform duration-700 transform-style-3d group hover:rotate-y-180">
        {/* Front Side */}
        <div className="absolute w-full h-full backface-hidden rounded-lg overflow-hidden bg-gradient-to-br from-blue-600 to-blue-800 shadow-lg">
          <div className="absolute inset-0 bg-black/20" />
          <div className="relative h-full flex flex-col items-center justify-end p-4">
            <div className="mb-2 text-white text-4xl drop-shadow-lg">
              {icon}
            </div>
            <p className="text-white text-center font-bold text-base sm:text-lg drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
              {title}
            </p>
          </div>
        </div>

        {/* Back Side */}
        <div className="absolute w-full h-full backface-hidden rotate-y-180 rounded-lg overflow-hidden bg-gradient-to-br from-blue-600/90 to-blue-800/90 backdrop-blur-sm shadow-2xl">
          <div className="h-full flex flex-col items-center justify-center p-4 gap-2">
            {visibleLinks.map((link) => (
              <button
                key={link.id}
                id={link.id}
                onClick={() => navigate(link.route)}
                className="
                  w-full px-4 py-2
                  text-white font-semibold text-sm
                  bg-white/10 hover:bg-white/20
                  rounded-md
                  transition-all duration-200
                  hover:scale-105 hover:shadow-lg
                  border border-white/20 hover:border-white/40
                "
              >
                {link.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default FlipCard;