import { StyTypography, StyTypographySection } from "@dreipol/t3-ui";
import { Typography, useTheme } from "@mui/material";

export const StyTypos = () => {
    const theme = useTheme();

    return <>
        <StyTypographySection>
            <StyTypography label={ 'H1' }
                spec={ theme.typography.h1 as Record<string, string> }
                render={ () => <Typography variant={ 'h1' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'H2' }
                spec={ theme.typography.h2 as Record<string, string> }
                render={ () => <Typography variant={ 'h2' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'H3' }
                spec={ theme.typography.h3 as Record<string, string> }
                render={ () => <Typography variant={ 'h3' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'H4' }
                spec={ theme.typography.h4 as Record<string, string> }
                render={ () => <Typography variant={ 'h4' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'H5' }
                spec={ theme.typography.h5 as Record<string, string> }
                render={ () => <Typography variant={ 'h5' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'H6' }
                spec={ theme.typography.h6 as Record<string, string> }
                render={ () => <Typography variant={ 'h6' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'subtitle1' }
                spec={ theme.typography.subtitle1 as Record<string, string> }
                render={ () => <Typography variant={ 'subtitle1' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'subtitle2' }
                spec={ theme.typography.subtitle2 as Record<string, string> }
                render={ () => <Typography variant={ 'subtitle2' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'body1' }
                spec={ theme.typography.body1 as Record<string, string> }
                render={ () => <Typography variant={ 'body1' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'body2' }
                spec={ theme.typography.body2 as Record<string, string> }
                render={ () => <Typography variant={ 'body2' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'button' }
                spec={ theme.typography.button as Record<string, string> }
                render={ () => <Typography variant={ 'button' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'caption' }
                spec={ theme.typography.caption as Record<string, string> }
                render={ () => <Typography variant={ 'caption' }>Lorem Ipsum</Typography> }></StyTypography>

            <StyTypography label={ 'overline' }
                spec={ theme.typography.overline as Record<string, string> }
                render={ () => <Typography variant={ 'overline' }>Lorem Ipsum</Typography> }></StyTypography>
        </StyTypographySection>
    </>
}