import React, { ReactNode } from "react";

interface CategoryCardProps {
  label: string;
  icon: ReactNode;
  onClick?: () => void;
}

/**
 * CategoryCard Component
 * Componente reutilizável para exibir cards de categorias em destaque
 * 
 * @param label - Texto do card
 * @param icon - Ícone ou elemento visual do card
 * @param onClick - Callback quando o card é clicado
 */
const CategoryCard: React.FC<CategoryCardProps> = ({
  label,
  icon,
  onClick,
}) => {
  return (
    <div
      onClick={onClick}
      className="group relative bg-white p-6 rounded-2xl border-2 border-orange-100 shadow-lg shadow-orange-500/[0.03] hover:shadow-orange-500/[0.08] hover:border-orange-400 hover:-translate-y-1 transition-all duration-300 cursor-pointer flex flex-col items-center justify-center text-center overflow-hidden min-h-[180px]"
    >
      {/* Fundo Decorativo */}
      <div className="absolute top-0 right-0 w-32 h-32 bg-orange-50/50 rounded-bl-[100px] -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-500"></div>

      <div className="mb-6 group-hover:scale-110 transition-transform flex items-center justify-center h-16 relative z-10">
        {icon}
      </div>

      <div className="flex flex-col items-center w-full relative z-10">
        <span className="text-[9px] font-black text-orange-400/70 uppercase tracking-[0.3em] mb-1.5 group-hover:text-orange-500 transition-colors">
          Produtos
        </span>
        <span className="text-lg font-black text-orange-600 uppercase tracking-tighter leading-none group-hover:scale-105 transition-transform">
          {label}
        </span>
      </div>

      {/* Indicador de Hover */}
      <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-orange-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
    </div>
  );
};

export default CategoryCard;