import { useState } from "react";
import { PiMinus, PiPlus } from "react-icons/pi";

export interface FaqItem {
  question: string;
  answer: string;
}

const faq: FaqItem[] = [
  {
    question: "What does KleboAi do exactly?",
    answer:
      "KleboAi checks any image you upload and tells you whether it's AI-generated or human-made. It works across images created by all major AI tools.",
  },
  {
    question: "How accurate is the KleboAi AI image detector?",
    answer:
      "KleboAi is built to be reliable across a wide range of images, using detection models trained to recognize patterns from major AI generators.",
  },
  {
    question: "What types of images can I upload to KleboAi?",
    answer:
      "KleboAi supports a wide range of image types, from personal photos and product shots to digital art and screenshots, in standard formats like JPG and PNG.",
  },
  {
    question: "Does KleboAi store the images I upload?",
    answer:
      "No, KleboAi doesn't keep your images. Each upload is analyzed once to generate a result, and nothing is saved or retained on our servers afterward.",
  },
  {
    question: "Do I need the Chrome extension to use KleboAI?",
    answer:
      "Yes. KleboAI runs as a Chrome extension and analyzes visual content directly on supported websites.",
  },
  {
    question: "How do I activate the extension?",
    answer:
      "After subscribing, enter your license key in the extension to activate your account and start analyzing content.",
  },
];

function FaqSection() {
  const [openIndex, setOpenIndex] = useState<number>(0);

  return (
    <div className="mt-8 space-y-4 sm:mt-10">
      {faq.map((item, index) => {
        const isOpen = openIndex === index;

        return (
          <div
            key={item.question}
            className={` relative
                        group rounded-xl glass-card glass-card-hover p-4 transition-all duration-300
                        ${isOpen ? "header-shadow" : ""}
                      `}
          >
            <button
              type="button"
              onClick={() => setOpenIndex(index)}
              className="
                          flex w-full cursor-pointer items-center gap-4 text-left font-heading text-lg font-normal text-heading
                          sm:gap-5 xl:text-xl
                          before:content-['']
                          before:absolute
                          before:h-full
                          before:w-full
                          before:top-0
                          before:left-0
                        "
            >
              <span className="flex h-7.5 w-7.5 min-w-7.5 items-center justify-center">
                {isOpen ? (
                  <PiMinus className="text-link-1" />
                ) : (
                  <PiPlus className="text-heading" />
                )}
              </span>

              {item.question}
            </button>

            <div
              className={`
                          grid overflow-hidden transition-all duration-500 ease-in-out
                          ${
                            isOpen
                              ? "mt-2.5 grid-rows-[1fr] opacity-100"
                              : "grid-rows-[0fr] opacity-0"
                          }
                        `}
            >
              <div className="overflow-hidden">
                <p className="pl-11 font-body text-base leading-7 text-text sm:pl-12 sm:text-lg">
                  {item.answer}
                </p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default FaqSection;