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

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

export const Presets = () => {
    /** Every CoreAI `TextPreset`, ordered largest to smallest, alongside the
     * `size`/`weight` pair it resolves to. Aliases that share the same
     * `size`/`weight` (`heading5`/`bodyStrong`, `heading6`/`bodySStrong`) are
     * listed on one row. */
    const textPresets: Array<{
        preset: TextPreset;
        label: string;
        size: number;
        weight: string;
    }> = [
        { preset: 'heading1', label: 'heading1', size: 900, weight: 'semibold' },
        { preset: 'heading2', label: 'heading2', size: 700, weight: 'semibold' },
        { preset: 'heading3', label: 'heading3', size: 500, weight: 'semibold' },
        { preset: 'heading4', label: 'heading4', size: 400, weight: 'semibold' },
        {
            preset: 'heading5',
            label: 'heading5 / bodyStrong',
            size: 300,
            weight: 'semibold',
        },
        { preset: 'body', label: 'body', size: 300, weight: 'regular' },
        {
            preset: 'heading6',
            label: 'heading6 / bodySStrong',
            size: 200,
            weight: 'semibold',
        },
        { preset: 'bodyS', label: 'bodyS', size: 200, weight: 'regular' },
        {
            preset: 'bodyXSStrong',
            label: 'bodyXSStrong',
            size: 100,
            weight: 'semibold',
        },
        { preset: 'bodyXS', label: 'bodyXS', size: 100, weight: 'regular' },
    ];
    const styles = /* css */ `
      .text-presets-example {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: var(--spacingHorizontalXXL);
        row-gap: var(--spacingVerticalM);
        align-items: baseline;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="text-presets-example">
          {textPresets.map(({ preset, label, size, weight }) => (<React.Fragment key={preset}>
              <Text preset={preset} foreground={weight === 'semibold' ? 1 : 2} block>
                {label}
              </Text>
              <Text foreground={4} size={200}>
                {size} / {weight}
              </Text>
            </React.Fragment>))}
        </div>
      </>);
};

export default Presets;