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

interface ShortcutCardProps {
  id: string;
  title: string;
  icon: React.ReactNode;
  route: string;
  gradient: string;
  visible?: boolean;
}

const ShortcutCard: React.FC<ShortcutCardProps> = ({ 
  id, 
  title, 
  icon, 
  route, 
  gradient,
  visible = true 
}) => {
  const navigate = useNavigate();

  if (!visible) return null;

  const handleClick = () => {
    navigate(route);
  };

  return (
    <div
      id={id}
      onClick={handleClick}
      className={`
        relative group cursor-pointer
        w-full sm:w-[230px] h-[120px]
        rounded-lg overflow-hidden
        transform transition-all duration-300 ease-in-out
        hover:-translate-y-2 hover:shadow-2xl
        border border-gray-200 hover:border-gray-800
        ${gradient}
      `}
    >
      {/* Background overlay for better text visibility */}
      <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-all duration-300" />
      
      {/* Content */}
      <div className="relative h-full flex flex-col items-center justify-end p-4">
        {/* Icon */}
        <div className="mb-2 transform transition-transform duration-300 group-hover:scale-110">
          <div className="text-white text-4xl drop-shadow-lg">
            {icon}
          </div>
        </div>
        
        {/* Title */}
        <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>

      {/* Hover glow effect */}
      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
        <div className="absolute inset-0 bg-gradient-to-t from-white/10 to-transparent" />
      </div>
    </div>
  );
};

export default ShortcutCard;