// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const HeadingLevels = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader as="h1">Accordion Header as h1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader as="h2">Accordion Header as h2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader as="h3">Accordion Header as h3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="4">
      <AccordionHeader as="h4">Accordion Header as h4</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 4</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default HeadingLevels;