"use client";

import { useState } from "react";
import { ChevronRight, ChevronUp, MessageCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { SunatRacingContent } from "@/services/sunat-racing.service";

interface SunatRacingFAQSectionProps {
  faqs: SunatRacingContent["faqs"];
  sectionTitle: string;
  sectionSubtitle: string;
}

const SunatRacingFAQSection = ({
  faqs,
  sectionTitle,
  sectionSubtitle,
}: SunatRacingFAQSectionProps) => {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  // Sort FAQs by order
  const sortedFaqs = faqs ? [...faqs].sort((a, b) => a.order - b.order) : [];

  return (
    <section className="bg-white py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row gap-12 lg:gap-16">
          {/* Left Side - Header */}
          <div className="lg:w-[400px] flex flex-col gap-4">
            <h2 className="text-4xl md:text-5xl font-medium text-[#114BC6] tracking-tight">
              {sectionTitle || "FAQ Sunat Adera"}
            </h2>
            <p className="text-xl md:text-2xl text-[rgba(4,12,108,0.8)] leading-relaxed">
              {sectionSubtitle || "Jawaban cepat seputar layanan sunat di Klinik Adera."}
            </p>
            <Button
              className="bg-[#FFB700] hover:bg-[#FFB700]/90 text-white font-extrabold text-xl rounded-full py-6 h-auto w-fit px-6 shadow-[0px_1px_11px_0px_rgba(255,212,102,0.32)] border-2 border-white mt-4"
            >
              Pertanyaan lain
              <MessageCircle className="w-6 h-6 ml-2" />
            </Button>
          </div>

          {/* Right Side - FAQ Accordion */}
          <div className="flex-1 space-y-4">
            {sortedFaqs.map((faq, index) => {
              const isOpen = openIndex === index;
              return (
                <div
                  key={faq.id}
                  className={`
                    border-2 rounded-[38px] overflow-hidden transition-all duration-300 cursor-pointer
                    ${isOpen ? "border-[#1500FF]" : "border-[#1500FF]"}
                  `}
                  onClick={() => toggleFAQ(index)}
                >
                  {/* Question Header */}
                  <div className="flex items-center justify-between px-6 py-5 md:px-8 md:py-6">
                    <h3 className="text-xl md:text-2xl font-medium text-[#10187B] tracking-tight pr-4">
                      {faq.question}
                    </h3>
                    <div className="shrink-0">
                      {isOpen ? (
                        <ChevronUp className="w-8 h-8 text-[#10187B]" />
                      ) : (
                        <ChevronRight className="w-8 h-8 text-[#10187B]" />
                      )}
                    </div>
                  </div>

                  {/* Answer Content */}
                  <div
                    className={`
                      overflow-hidden transition-all duration-300
                      ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}
                    `}
                  >
                    <div className="px-6 pb-6 md:px-8 md:pb-8">
                      <p className="text-lg md:text-xl text-[rgba(16,24,123,0.73)] leading-relaxed">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export default SunatRacingFAQSection;