"use client";

import { useId, useState, type ReactNode } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

interface AccordionItemProps {
  title: string;
  children: ReactNode;
  defaultOpen?: boolean;
}

export function AccordionItem({ title, children, defaultOpen = false }: AccordionItemProps) {
  const [open, setOpen] = useState(defaultOpen);
  const reactId = useId();
  const contentId = `acc-${reactId}`;
  return (
    <div
      className={cn(
        "group overflow-hidden rounded-2xl border bg-white/80 backdrop-blur-sm transition-all duration-300 ease-snappy dark:bg-slate-900/70",
        open
          ? "border-brand-300/60 shadow-soft dark:border-brand-400/30"
          : "border-slate-200/80 hover:border-slate-300 dark:border-slate-800 dark:hover:border-slate-700",
      )}
    >
      <button
        type="button"
        aria-expanded={open}
        aria-controls={contentId}
        onClick={() => setOpen((o) => !o)}
        className="flex w-full items-center justify-between gap-4 px-5 py-4 text-start transition-colors duration-200 sm:px-6 sm:py-5"
      >
        <span
          className={cn(
            "text-base font-semibold transition-colors duration-200 sm:text-base",
            open
              ? "text-brand-700 dark:text-brand-300"
              : "text-slate-900 dark:text-white",
          )}
        >
          {title}
        </span>
        <span
          className={cn(
            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-all duration-300 ease-snappy",
            open
              ? "rotate-180 bg-brand-500 text-white"
              : "bg-slate-100 text-slate-500 group-hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-400 dark:group-hover:bg-slate-700",
          )}
        >
          <ChevronDown className="h-4 w-4" />
        </span>
      </button>
      <div
        id={contentId}
        className={cn(
          "grid overflow-hidden transition-all duration-400 ease-snappy",
          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
        )}
      >
        <div className="overflow-hidden">
          <div className="px-5 pb-5 text-base leading-relaxed text-slate-600 dark:text-slate-300 sm:px-6 sm:pb-6">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}