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

import { Text } from "@coreai-ds/react-components";
import { TabList } from "@coreai-ds/react-components";
import { Tab } from "@coreai-ds/react-components";
import * as React from 'react';

export const ElevatedAppearance = () => {
    const styles = /* css */ `
      .tab-list-elevated-example {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalXXL);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="tab-list-elevated-example">
          <Text as="p" block>
            The <code>elevated</code> appearance raises the tab strip onto its own background with
            rounded corners and padding around every tab, instead of the flat underline/indicator
            styling the other appearances use.
          </Text>
          <TabList appearance="elevated" defaultSelectedValue="tab2">
            <Tab value="tab1">First Tab</Tab>
            <Tab value="tab2">Second Tab</Tab>
            <Tab value="tab3">Third Tab</Tab>
          </TabList>
        </div>
      </>);
};

export default ElevatedAppearance;