import { Icon } from '@/components/foundation/Icon';
import type { ReactNode } from 'react';
import styles from './Accordion.module.css';

export interface AccordionItem {
  id: string;
  title: string;
  content: ReactNode;
  open?: boolean;
}

export function Accordion({
  items,
  headingLevel = 3,
}: {
  items: AccordionItem[];
  headingLevel?: 2 | 3 | 4;
}) {
  const Heading = `h${headingLevel}` as const;
  return (
    <div className={styles.accordion}>
      {items.map((item) => (
        <details key={item.id} className={styles.item} open={item.open}>
          <summary className={styles.summary}>
            <Heading className={styles.heading}>{item.title}</Heading>
            <Icon name="chevron-down" className={styles.icon} />
          </summary>
          <div className={styles.content}>{item.content}</div>
        </details>
      ))}
    </div>
  );
}
