import React from "react";

import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

import {
  AccordionHeading,
  type AccordionHeadingProps,
} from "./components/AccordionHeading/AccordionHeading";

import {
  AccordionDisclosureList,
  AccordionDisclosureListProps,
} from "./components/AccordionDisclosureList/AccordionDisclosureList";

import styles from "./Accordion.module.css";

/**
 * Use the `Accordion` component to package together a title, content and a number of disclosure components into one section (maximum 10).
 */
export const Accordion: React.FC<AccordionProps> = ({
  heading,
  headingLevel,
  headingSize,
  content,
  id,
  disclosureList,
  ...props
}) => {
  return (
    <div className={styles.Accordion} {...filterAttrs(props)}>
      <AccordionHeading
        isPadded
        id={id}
        data-testid="Accordion-header"
        heading={heading}
        headingLevel={headingLevel}
        headingSize={headingSize}
        content={content}
      />
      <AccordionDisclosureList disclosureList={disclosureList} />
    </div>
  );
};

export interface AccordionProps
  extends Omit<AccordionHeadingProps, "isPadded">,
    AccordionDisclosureListProps {}