"use client";

import { useState } from "react";

export default function CollapsibleCard({
  title,
  defaultOpen = true,
  children,
}: {
  title: string;
  defaultOpen?: boolean;
  children: React.ReactNode;
}) {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <div className="card overflow-hidden">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center justify-between gap-2 p-5 text-left transition hover:bg-slate-50"
        aria-expanded={open}
      >
        <h2 className="font-semibold">{title}</h2>
        <span className="shrink-0 text-slate-400" aria-hidden>
          {open ? "▾" : "▸"}
        </span>
      </button>
      {open ? <div className="border-t border-slate-100 px-5 pb-5 pt-3">{children}</div> : null}
    </div>
  );
}