'use client';

import { useId, useState } from 'react';

export default function Expandable({ title, children }) {
  const [expanded, setExpanded] = useState(true);
  const contentId = useId();

  return (
    <section className="expandable">
      <header>
        <h2>{title}</h2>
        <button
          type="button"
          aria-expanded={expanded}
          aria-controls={contentId}
          onClick={() => setExpanded((current) => !current)}
        >
          {expanded ? 'Hide details' : 'Show details'}
        </button>
      </header>
      <div id={contentId} hidden={!expanded}>{children}</div>
    </section>
  );
}