"use client"

import * as React from "react"
import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils"

export default function Accordion() {
  const [openItem, setOpenItem] = React.useState<string | null>("item-1")

  return (
    <div className="w-full max-w-[400px] space-y-4">
      {["item-1", "item-2", "item-3"].map((item, index) => (
        <div key={item} className="rounded-lg border border-zinc-200 dark:border-zinc-800">
          <button
            onClick={() => setOpenItem(openItem === item ? null : item)}
            className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900/50"
          >
            <span>Accordion Item {index + 1}</span>
            <ChevronDown
              className={cn(
                "h-4 w-4 text-zinc-500 transition-transform duration-200 dark:text-zinc-400",
                openItem === item ? "rotate-180" : ""
              )}
            />
          </button>
          <div
            className={cn(
              "overflow-hidden text-sm transition-all duration-300 ease-in-out",
              openItem === item ? "max-h-40 opacity-100" : "max-h-0 opacity-0"
            )}
          >
            <div className="px-4 pb-4 pt-0 text-zinc-500 dark:text-zinc-400">
              Yes. It adheres to the WAI-ARIA design pattern.
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}