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-[14px] border-[2px] border-[rgba(220,210,180,0.45)] bg-[linear-gradient(160deg,rgba(28,28,28,0.97)_0%,rgba(10,10,10,0.99)_100%)] px-4 py-4 text-center transition-all duration-300 hover:border-[rgba(235,225,195,0.7)] hover:-translate-y-[3px] hover:shadow-[0_6px_24px_rgba(0,0,0,0.5),0_0_15px_rgba(220,210,180,0.07)] ${onClick ? "cursor-pointer" : ""} ${className}`}
    >
      <div className="pointer-events-none absolute inset-0 rounded-[14px] bg-[radial-gradient(ellipse_at_50%_0%,rgba(235,225,190,0.07)_0%,transparent_55%)]" />

      <div className="relative mb-2 flex h-10 w-10 items-center justify-center">
        {icon}
      </div>
      <p className="relative text-xs font-medium text-[#f0f0f0]">{title}</p>
      <p className="relative mt-1 text-[11px] leading-relaxed text-[#888888]">
        {description}
      </p>
    </Component>
  );
}