"use client";

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

interface AccordionItem {
  id: string;
  title: string;
  content: string;
}

interface FeatureCardTwentyOneProps {
  title: string;
  description: string;
  tag: string;
  tagIcon: LucideIcon;
  tagAnimation?: string;
  accordionItems: AccordionItem[];
}

export default function FeatureCardTwentyOne({
  title,
  description,
  tag,
  tagIcon: TagIcon,
  accordionItems,
}: FeatureCardTwentyOneProps) {
  const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});

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

  return (
    <section className="w-full py-12 md:py-20 lg:py-24">
      <div className="container mx-auto px-4 md:px-6">
        {/* Header Section */}
        <div className="mb-12 md:mb-16 text-center">
          <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
            <TagIcon className="w-4 h-4 text-blue-600" />
            <span className="text-sm font-semibold text-blue-600">{tag}</span>
          </div>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
            {title}
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {description}
          </p>
        </div>

        {/* Flip Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {accordionItems.map((item) => (
            <div
              key={item.id}
              className="h-80 cursor-pointer perspective"
              onClick={() => toggleFlip(item.id)}
            >
              <div
                className="relative w-full h-full transition-transform duration-500 transform-gpu"
                style={{
                  transformStyle: "preserve-3d",
                  transform: flipped[item.id]
                    ? "rotateY(180deg)"
                    : "rotateY(0deg)",
                }}
              >
                {/* Front Side */}
                <div
                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
                  style={{
                    backfaceVisibility: "hidden",
                  }}
                >
                  <div>
                    <h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
                      {item.title}
                    </h3>
                    <p className="text-gray-500 text-sm">
                      Click to read more
                    </p>
                  </div>
                  <div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
                    <span className="text-blue-600 font-bold text-lg">
                      {item.id}
                    </span>
                  </div>
                </div>

                {/* Back Side */}
                <div
                  className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
                  style={{
                    backfaceVisibility: "hidden",
                    transform: "rotateY(180deg)",
                  }}
                >
                  <div>
                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4">
                      {item.title}
                    </h3>
                    <p className="text-blue-50 text-sm leading-relaxed">
                      {item.content}
                    </p>
                  </div>
                  <p className="text-blue-200 text-xs text-center">
                    Click to flip back
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}