import React from 'react';

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

export const FeatureCard: React.FC<FeatureCardProps> = ({
  title,
  description,
  icon,
  badge,
}) => {
  return (
    <div className="glass-effect p-8 rounded-xl relative overflow-hidden group hover:border-primary/50 transition-all duration-500">
      <div className="absolute -top-20 -right-20 w-40 h-40 bg-primary/5 rounded-full blur-3xl group-hover:bg-primary/10 transition-all"></div>
      
      <div className="relative z-10">
        {icon && (
          <div className="w-12 h-12 rounded-lg bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            {icon}
          </div>
        )}
        
        {badge && (
          <span className="absolute top-4 right-4 px-3 py-1 rounded-full bg-primary text-white text-[10px] font-bold uppercase tracking-widest">
            {badge}
          </span>
        )}
        
        <h3 className="text-xl font-bold mb-4 text-white group-hover:text-primary transition-colors">
          {title}
        </h3>
        <p className="text-neutral-gray text-sm leading-relaxed">
          {description}
        </p>
      </div>
    </div>
  );
};
