import type { ReactNode } from "react";

interface FeatureCardProps {
  icon: ReactNode;
  title: string;
  description: string;
  onClick?: () => void;
  className?: string;
}

export function FeatureCard({
  icon,
  title,
  description,
  onClick,
  className = "",
}: FeatureCardProps) {
  const Component = onClick ? "button" : "div";

  return (
    <Component
      onClick={onClick}
      className={`group relative flex flex-col items-center rounded-xl px-4 py-4 text-center transition-all duration-300 hover:-translate-y-[3px] ${onClick ? "cursor-pointer" : ""} ${className}`}
      style={{
        border: "1px solid rgba(0,255,255,0.15)",
        background: "linear-gradient(160deg, rgba(0,255,255,0.04) 0%, rgba(5,5,21,0.95) 100%)",
      }}
      onMouseEnter={e => {
        (e.currentTarget as HTMLElement).style.borderColor = "rgba(0,255,255,0.4)";
        (e.currentTarget as HTMLElement).style.boxShadow = "0 0 20px rgba(0,255,255,0.1)";
      }}
      onMouseLeave={e => {
        (e.currentTarget as HTMLElement).style.borderColor = "rgba(0,255,255,0.15)";
        (e.currentTarget as HTMLElement).style.boxShadow = "none";
      }}
    >
      <div className="pointer-events-none absolute inset-0 rounded-xl"
        style={{ background: "radial-gradient(ellipse at 50% 0%, rgba(0,255,255,0.06) 0%, transparent 60%)" }}
      />
      <div className="relative mb-2 flex h-10 w-10 items-center justify-center">
        {icon}
      </div>
      <p className="relative text-xs font-semibold" style={{ color: "#e0e0f0", fontFamily: "'Exo 2', sans-serif" }}>{title}</p>
      <p className="relative mt-1 text-[11px] leading-relaxed" style={{ color: "rgba(224,224,240,0.5)" }}>
        {description}
      </p>
    </Component>
  );
}