import { useState } from "react"
import { Plus } from "lucide-react"
import { cn } from "@/lib/utils"

export function CharacterAccordion({ name, description }: { name: string; description?: string }) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="border-b border-amber-900/15 last:border-0 group/accordion">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between py-6 px-8 hover:bg-amber-900/[0.06] transition-all duration-300 text-left"
      >
        <span className="text-amber-100/70 group-hover/accordion:text-amber-100/90 font-serif text-lg tracking-wide transition-colors duration-300">
          {name}
        </span>
        <div
          className={cn(
            "w-9 h-9 rounded-full flex items-center justify-center",
            "bg-amber-900/15 border border-amber-700/20",
            "transition-all duration-500",
            isOpen && "bg-amber-800/30 rotate-45 border-amber-600/30",
          )}
        >
          <Plus className="w-4 h-4 text-amber-400/60" />
        </div>
      </button>
      <div
        className={cn(
          "overflow-hidden transition-all duration-500 ease-out",
          isOpen ? "max-h-48 opacity-100" : "max-h-0 opacity-0",
        )}
      >
        {description && <p className="px-8 pb-6 text-amber-200/40 leading-relaxed font-sans">{description}</p>}
      </div>
    </div>
  )
}
