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

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 AccordionCard = () => {
    const styles = /* css */ `
      .accordion-card-example {
        background-color: var(--colorNeutralBackground1);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusXLarge);
        max-width: 100%;
        overflow: hidden;
        width: 30rem;
      }

      .accordion-card-example__header-button.fui-AccordionHeader__button {
        padding-inline: var(--spacingHorizontalL);
      }

      .accordion-card-example__body {
        display: grid;
        padding: var(--spacingVerticalM) var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalS);
        border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
      }

      .accordion-card-example__body-copy {
        margin: 0;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Accordion className="accordion-card-example" collapsible defaultOpenItems="evaluation-details">
          <AccordionItem value="evaluation-details">
            <AccordionHeader button={{ className: 'accordion-card-example__header-button' }}>
              Evaluation details
            </AccordionHeader>
            <AccordionPanel className="accordion-card-example__body">
              <p className="accordion-card-example__body-copy">
                Review the configuration and results for this evaluation before sharing it with your
                team.
              </p>
              <p className="accordion-card-example__body-copy">
                The evaluation uses the latest version of the customer-support dataset.
              </p>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
      </>);
};

export default AccordionCard;