"use client";
import Link from "next/link";
import { useRef, useState } from "react";

interface IFAQ {
  question: string;
  answer: string;
}

function FAQ({ question, answer }: IFAQ) {
  const [isActive, setIsActive] = useState<boolean>(false);
  const contentRef = useRef<HTMLDivElement>(null);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className="py-4 border-b border-white/10 cursor-pointer overflow-hidden"
    >
      <div className="flex justify-between items-center">
        <p
          className={`flex items-center gap-2 text-lg ${
            isActive ? "text-white" : "text-white/75"
          }`}
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className={`${isActive ? "transform rotate-90" : ""} duration-200`}
          >
            <path
              d="M9 18L15 12L9 6"
              stroke="#09C04C"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          {question}
        </p>
      </div>

      <div
        ref={contentRef}
        className={`${
          isActive ? "pt-[10px]" : ""
        } duration-300 overflow-hidden`}
        style={{
          maxHeight: isActive
            ? `${
                contentRef.current?.scrollHeight
                  ? contentRef.current?.scrollHeight + 10
                  : "0"
              }px`
            : "0px",
        }}
      >
        <p
          dangerouslySetInnerHTML={{
            __html: answer,
          }}
          className="text-white/75"
        ></p>
      </div>
    </div>
  );
}

export default function FAQsSection() {
  const faqs: IFAQ[] = [
    {
      question: "Do I need ChatGPT plus for a subscription?",
      answer:
        "No you don't! This subscription is completely different from ChatGPT plus.",
    },
    {
      question: "Do I need my own API key for a subscription?",
      answer:
        "No you don't! This subscription is completely different from ChatGPT plus.",
    },
    {
      question: "How can I cancel my subscription?",
      answer:
        "No you don't! This subscription is completely different from ChatGPT plus.",
    },
    {
      question: "How long will it take for support to respond?",
      answer:
        "No you don't! This subscription is completely different from ChatGPT plus.",
    },
    {
      question: "What should I do if I encounter a problem?",
      answer:
        "No you don't! This subscription is completely different from ChatGPT plus.",
    },
  ];

  return (
    <section id="faqs">
      <div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
        <p className="mb-2 font-mono text-sm font-medium text-[#09C04C]">
          FAQs
        </p>

        <h2 className="mb-3 font-serif text-4xl font-bold text-white">
          Frequently Asked Question
        </h2>

        <p className="mb-4 text-white/75">
          Answers to all your most asked questions
        </p>

        <div className="mb-12 w-full">
          {faqs.map((faq, index) => (
            <FAQ key={index} {...faq} />
          ))}
        </div>

        <p className="text-lg text-center text-white">
          Still have questions? <br /> Reach out to{" "}
          <Link href={"/"} className="text-[#09C04C]">
            support@collano.ai
          </Link>
        </p>
      </div>
    </section>
  );
}
