'use client';

import React from 'react';

import styles from './AccordionItem.module.css';

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

export default function AccordionItem({
  title,
  defaultOpen,
  children,
}: AccordionItemProps) {
  const [isOpen, setIsOpen] = React.useState(defaultOpen);
  return (
    <details
      className={styles.item}
      open={isOpen}
      onToggle={(e) => setIsOpen(e.currentTarget.open)}
    >
      <summary
        className={styles.summary}
        onClick={(e) => {
          e.preventDefault();
          setIsOpen(!isOpen);
        }}
      >
        {title}
      </summary>
      <div className={styles.content}>
        <div className={styles.inner}>{children}</div>
      </div>
    </details>
  );
}
