'use client';

import React, { useState } from 'react';
import { LucideIcon } from 'lucide-react';

interface Metric {
  icon: LucideIcon;
  label: string;
  value: string;
}

interface AboutMetricProps {
  title: string;
  metrics: Metric[];
  metricsAnimation?: string;
  useInvertedBackground?: boolean;
}

export default function AboutMetric({
  title,
  metrics,
  metricsAnimation = 'slide-up',
  useInvertedBackground = false,
}: AboutMetricProps) {
  const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});

  const toggleFlip = (index: number) => {
    setFlipped((prev) => ({
      ...prev,
      [index]: !prev[index],
    }));
  };

  const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
  const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';

  const getAnimationDelay = (index: number) => {
    if (metricsAnimation === 'slide-up') {
      return {
        transitionDelay: `${index * 100}ms`,
      };
    }
    return {};
  };

  return (
    <section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
      <div className="max-w-6xl mx-auto">
        <div className="mb-12">
          <h2 className={`text-3xl sm:text-4xl font-bold ${textClass} text-center`}>
            {title}
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {metrics.map((metric, index) => {
            const Icon = metric.icon;
            const isFlipped = flipped[index] || false;

            return (
              <div
                key={index}
                className="h-64 cursor-pointer perspective"
                onClick={() => toggleFlip(index)}
                style={getAnimationDelay(index)}
              >
                <div
                  className="relative w-full h-full transition-transform duration-500 transform-gpu"
                  style={{
                    transformStyle: 'preserve-3d',
                    transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
                  }}
                >
                  {/* Front Side */}
                  <div
                    className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
                    style={{
                      backfaceVisibility: 'hidden',
                    }}
                  >
                    <Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
                    <p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
                      {metric.label}
                    </p>
                    <p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
                      {metric.value}
                    </p>
                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
                      Click to learn more
                    </p>
                  </div>

                  {/* Back Side */}
                  <div
                    className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
                    style={{
                      backfaceVisibility: 'hidden',
                      transform: 'rotateY(180deg)',
                    }}
                  >
                    <p className={`text-sm ${textClass} text-center leading-relaxed`}>
                      {metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
                    </p>
                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
                      Click to flip back
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}