"use client";
import { useId, useState } from "react";
import styles from "./accordion.module.scss";

export const Accordion = ({ heading, children }: any) => {
  const labelId = useId();
  const contentId = useId();
  const [showContent, setShowContent] = useState(false);
  function toggleContent() {
    setShowContent(!showContent);
  }
  return (
    <section className={styles.accordion} data-open={showContent}>
      <div
        id={labelId}
        className={styles.accordionHeader}
        onClick={toggleContent}
        aria-expanded={showContent}
        aria-controls={contentId}
      >
        <span>{heading}</span>
      </div>
      <div
        id={contentId}
        className={styles.accordionContent}
        aria-labelledby={labelId}
      >
        {children}
      </div>
    </section>
  );
};
