"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">
        <div className="mb-12 md:mb-16">
          <div className="flex items-center gap-2 mb-4">
            <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200">
              <TagIcon className="w-4 h-4 text-blue-600" />
              <span className="text-sm font-medium text-blue-600">{tag}</span>
            </div>
          </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">{description}</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {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 of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-lg border border-gray-200 shadow-md p-6 flex flex-col justify-between"
                  style={{
                    backfaceVisibility: "hidden",
                  }}
                >
                  <div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-500">
                      Click to read full testimonial
                    </p>
                  </div>
                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100">
                    <svg
                      className="w-5 h-5 text-blue-600"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 5l7 7-7 7"
                      />
                    </svg>
                  </div>
                </div>

                {/* Back of card */}
                <div
                  className="absolute w-full h-full bg-blue-600 rounded-lg border border-blue-700 shadow-md p-6 flex flex-col justify-between text-white"
                  style={{
                    backfaceVisibility: "hidden",
                    transform: "rotateY(180deg)",
                  }}
                >
                  <div>
                    <p className="text-sm leading-relaxed">{item.content}</p>
                  </div>
                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500">
                    <svg
                      className="w-5 h-5 text-white"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 19l-7-7 7-7"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}