"use client"
import { useEffect, useRef, useState } from 'react';
import { Briefcase, Trophy, Users, Clock } from 'lucide-react';

interface StatCardProps {
  icon: React.ReactNode;
  value: number;
  label: string;
  suffix?: string;
  isVisible: boolean;
}

function StatCard({ icon, value, label, suffix = '', isVisible }: StatCardProps) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!isVisible) return;

    let start = 0;
    const duration = 2000;
    const increment = value / (duration / 16);

    const timer = setInterval(() => {
      start += increment;
      if (start >= value) {
        setCount(value);
        clearInterval(timer);
      } else {
        setCount(Math.floor(start));
      }
    }, 16);

    return () => clearInterval(timer);
  }, [isVisible, value]);

  return (
    <div className="group relative overflow-hidden border border-gray-200 p-10 transition-all duration-500 hover:border-orange-500">
      <div
        className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        style={{
          backgroundColor: '#000',
          backgroundImage: `
            linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
            linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
            linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
          `,
          backgroundSize: '40px 40px',
          backgroundPosition: '0 0, 0 20px, 20px -20px, -20px 0px'
        }}
      />

      <div className="relative z-10 flex flex-col items-center text-center">
        <div className="mb-6 text-orange-500 transition-transform duration-500 group-hover:scale-110">
          {icon}
        </div>

        <div className="mb-4 transition-colors duration-500 group-hover:text-white" style={{ fontSize: '4rem', fontWeight: 900, lineHeight: 1 }}>
          {count}{suffix}
        </div>

        <div className="text-gray-600 transition-colors duration-500 group-hover:text-gray-300" style={{ fontSize: '1.125rem' }}>
          {label}
        </div>
      </div>
    </div>
  );
}

export default function Counter() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

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

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

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, []);

  const stats = [
    {
      icon: <Briefcase size={64} strokeWidth={1.5} />,
      value: 12,
      suffix: 'K',
      label: 'Projects Completed'
    },
    {
      icon: <Trophy size={64} strokeWidth={1.5} />,
      value: 26,
      suffix: '',
      label: 'Honorable Award'
    },
    {
      icon: <Users size={64} strokeWidth={1.5} />,
      value: 100,
      suffix: '+ K',
      label: 'Satisfied Customers'
    },
    {
      icon: <Clock size={64} strokeWidth={1.5} />,
      value: 25,
      suffix: '',
      label: 'Years Great Experience'
    }
  ];

  return (
    <div ref={sectionRef} className="w-full py-20">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <StatCard
            key={index}
            icon={stat.icon}
            value={stat.value}
            suffix={stat.suffix}
            label={stat.label}
            isVisible={isVisible}
          />
        ))}
      </div>
    </div>
  );
}