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

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

export const Default = () => {
    /** Renders inline code-styled text using `Text`'s `monospace` font. */
    const Code = ({ children }: React.PropsWithChildren): React.JSX.Element => (<Text font="monospace" foreground={1}>
        {children}
      </Text>);
    const styles = /* css */ `
      .text-default-example {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacingVerticalS);
        max-width: 80ch;
      }
      .text-default-example__divider {
        margin: var(--spacingVerticalL) 0;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="text-default-example">
          <Text as="h2" preset="heading3" foreground={1} block>
            Weekly status report{' '}
            <Text foreground={4} weight="regular">
              (00/00/0000)
            </Text>
          </Text>
          <Text as="p" preset="body" block>
            This paragraph uses the <Code>body</Code> preset with <Code>foreground=2</Code>, the
            standard combination for readable body copy.
          </Text>
          <Text preset="body" weight="bold" foreground={1} block>
            Action needed: review the deployment checklist before Friday.
          </Text>
          <Text as="p" preset="bodyS" block>
            For quicker styling, pass a <Code>TextPreset</Code> name in the <Code>preset</Code> prop
            instead of Fluent's separate size/weight components.
          </Text>
          <Text preset="bodyXS" foreground={4}>
            Posted 3 days ago · 5 min read
          </Text>
          <Divider className="text-default-example__divider"/>
          <div>
            <Text>Same</Text> <span>Same</span>
          </div>
          <Text as="p" block preset="bodyS" foreground={3}>
            The above two <Text italic>"Same"</Text> elements render text visually the same.{' '}
            <Code>Text</Code> components inherit css text properties by default (differently from
            Fluent's Text components) so they can be nested more constructively.
          </Text>
        </div>
      </>);
};

export default Default;