'use client';

import { useState } from 'react';
import { useControllableState } from 'use-a-hook';

function Details({
  value,
  onChange,
}: {
  value?: boolean;
  onChange?: (next: boolean) => void;
}) {
  const [open, setOpen] = useControllableState({
    value,
    defaultValue: false,
    onChange,
  });
  return (
    <section>
      <button aria-expanded={open} onClick={() => setOpen((current) => !current)}>
        Details
      </button>
      {open && <p>Reusable components can share the remote.</p>}
    </section>
  );
}
export default function ControlledDetails() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Parent opens details</button>
      <Details value={open} onChange={setOpen} />
    </>
  );
}