import { FiPlus } from "react-icons/fi"
import { Button } from "./button"
import { useState } from "react"

type AccordionProps = {
  question: string
  answer: string
  isOpen?: boolean
  onToggle?: () => void
}

const Accordion = ({ question, answer, isOpen, onToggle }: AccordionProps) => {
  const [internalOpen, setInternalOpen] = useState(false)
  const open = typeof isOpen === "boolean" ? isOpen : internalOpen

  const handleToggle = () => {
    if (onToggle) {
      onToggle()
    } else {
      setInternalOpen((prev) => !prev)
    }
  }

  return (
    <Button
      onClick={handleToggle}
      className="p-4 w-full h-auto block bg-[#F1F5F9] hover:bg-[#F1F5F9] text-[#1D293D] text-start"
    >
      <div className="flex gap-2 text-lg font-normal">
        <FiPlus
          className={`size-6 transition-transform duration-300 ${
            open ? "rotate-45" : ""
          }`}
          strokeWidth={1.2}
        />
        <p className="text-wrap">
          {question}
        </p>
      </div>

      <div
        className={`
          overflow-hidden
          transition-[max-height]
          duration-300
          ${open ? "max-h-40" : "max-h-0"}
        `}
      >
        <p className="text-base text-[#45556C] px-6 pt-2 font-normal text-wrap">
          {answer}
        </p>
      </div>
    </Button>
  )
}

export default Accordion