'use client';

interface FeatureCardProps {
  icon: React.ReactNode;
  title: string;
  description: string;
}

export default function FeatureCard({
  icon,
  title,
  description,
}: FeatureCardProps) {
  return (
    <div className="group relative overflow-hidden rounded-lg border border-surface-700 bg-surface-800/50 backdrop-blur-sm p-6 transition-all duration-300 hover:border-brand-500/50 hover:bg-surface-800/80 hover:shadow-lg hover:shadow-brand-500/10">
      {/* Background gradient effect on hover */}
      <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />

      <div className="relative z-10">
        {/* Icon */}
        <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
          <div className="text-2xl">{icon}</div>
        </div>

        {/* Title */}
        <h3 className="mb-2 text-lg font-semibold text-surface-50">
          {title}
        </h3>

        {/* Description */}
        <p className="text-surface-300 text-sm leading-relaxed">
          {description}
        </p>
      </div>
    </div>
  );
}