'use client';

import { useRef, useEffect, useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LucideIcon } from 'lucide-react';

interface FeatureIcon {
  Icon: LucideIcon;
  color: string;
  bg: string;
}

interface FeatureCardProps {
  title: string;
  description: string;
  icons: FeatureIcon[];
  gradient: string;
  delay?: number;
}

export function FeatureCard({ title, description, icons, gradient, delay = 0 }: FeatureCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [isInView, setIsInView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsInView(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      className={`opacity-0 ${isInView ? 'animate-fade-in-up' : ''}`}
      style={{ animationDelay: `${delay}ms` }}
    >
      <Card
        className="relative backdrop-blur-xl border border-white/10 shadow-xl hover-lift transition-all duration-300 h-full overflow-hidden group"
        style={{
          background: `linear-gradient(135deg, ${gradient})`,
        }}
      >
        {/* Decorative gradient orb */}
        <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-white/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none group-hover:scale-110 transition-transform duration-500" />

        <CardHeader className="relative z-10">
          <div className="flex items-center gap-2 mb-3">
            {icons.map((icon, index) => (
              <div
                key={index}
                className={`w-10 h-10 rounded-xl ${icon.bg} flex items-center justify-center`}
              >
                <icon.Icon className={`h-5 w-5 ${icon.color}`} />
              </div>
            ))}
          </div>
          <CardTitle className="text-xl font-bold text-foreground">{title}</CardTitle>
        </CardHeader>

        <CardContent className="relative z-10">
          <p className="text-muted-foreground leading-relaxed">{description}</p>
        </CardContent>
      </Card>
    </div>
  );
}
