import React from 'react';
import { FeatureCardProps } from '@/types';

export const FeatureCard: React.FC<FeatureCardProps> = ({ title, description, icon, accentColor }) => {
  const accentClass = accentColor === 'primary' 
    ? 'border-zsl-primary/20 text-zsl-primary group-hover:border-zsl-primary/50' 
    : 'border-zsl-accent/20 text-zsl-accent group-hover:border-zsl-accent/50';

  const bgGradient = accentColor === 'primary'
    ? 'from-zsl-card to-zsl-bg group-hover:shadow-[0_0_30px_rgba(0,212,255,0.15)]'
    : 'from-zsl-card to-zsl-bg group-hover:shadow-[0_0_30px_rgba(255,170,0,0.15)]';

  const iconBg = accentColor === 'primary' ? 'bg-zsl-primary/10' : 'bg-zsl-accent/10';
  const iconColor = accentColor === 'primary' ? 'text-zsl-primary' : 'text-zsl-accent';

  return (
    <div className={`group p-6 rounded-xl border ${accentClass} bg-linear-to-br ${bgGradient} transition-all duration-300 transform hover:-translate-y-2 relative overflow-hidden h-full backdrop-blur-sm`}>
      {/* Tech Circuit Pattern Background (Visible on Hover) */}
      <div className="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-500 pointer-events-none">
        <svg className="w-full h-full" width="100%" height="100%">
          <pattern id={`circuit-${title.replace(/\s/g, '')}`} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
             <path d="M10 0v20M0 10h20" stroke="currentColor" strokeWidth="0.5" fill="none" />
          </pattern>
          <rect width="100%" height="100%" fill={`url(#circuit-${title.replace(/\s/g, '')})`} />
        </svg>
      </div>

      <div className="absolute top-0 right-0 p-3 opacity-20 group-hover:opacity-40 transition-opacity rotate-12 group-hover:rotate-0 duration-500">
         <svg width="60" height="60" viewBox="0 0 100 100" fill="none" className={accentColor === 'primary' ? 'stroke-zsl-primary' : 'stroke-zsl-accent'}>
            <circle cx="50" cy="50" r="40" strokeWidth="1" strokeDasharray="4 4" className="animate-spin-slow" />
            <path d="M50 10 L50 90 M10 50 L90 50" strokeWidth="0.5" />
         </svg>
      </div>
      
      <div className="mb-6 relative z-10">
        <div className={`p-3 rounded-lg inline-flex items-center justify-center ${iconBg} ${iconColor} group-hover:scale-110 transition-all shadow-lg`}>
           {icon}
        </div>
      </div>
      <h3 className="text-xl font-mono font-bold text-white mb-3 relative z-10 group-hover:translate-x-1 transition-transform">{title}</h3>
      <p className="text-zsl-muted text-sm leading-relaxed relative z-10 group-hover:text-zsl-text transition-colors">{description}</p>
    </div>
  );
};
