"use client";

import { Minus, Plus } from "lucide-react";
import { useState } from "react";
import type { FAQItemProps } from "@/data/faq";

export function FAQItem({ question, answer }: FAQItemProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <button
      aria-expanded={isOpen}
      className="faq-item w-full cursor-pointer py-4 text-left transition-all duration-200 hover:bg-white/5"
      onClick={toggleOpen}
      type="button"
    >
      <div className="flex items-start">
        <div className="relative mt-1 mr-4 h-6 w-6 flex-shrink-0">
          <Plus
            className={`absolute inset-0 h-6 w-6 text-[#FD105E] transition-all duration-200 ease-out ${
              isOpen
                ? "rotate-90 scale-0 opacity-0"
                : "rotate-0 scale-100 opacity-100"
            }`}
          />
          <Minus
            className={`absolute inset-0 h-6 w-6 text-[#FD105E] transition-all duration-200 ease-out ${
              isOpen
                ? "rotate-0 scale-100 opacity-100"
                : "rotate-90 scale-0 opacity-0"
            }`}
          />
        </div>
        <div className="flex-1">
          <h3 className="font-medium text-lg text-neutral-200">{question}</h3>
          <div
            className={`overflow-hidden transition-all duration-300 ease-out ${
              isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
            }`}
          >
            <div className="mt-2 text-base text-neutral-400">{answer}</div>
          </div>
        </div>
      </div>
    </button>
  );
}