import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Code, Heading, Paragraph } from '@knkui/typography';

export default function Surfaces() {
    return (
        <Layout
            title="Surfaces"
            showHero
            description="A surface, as the term is most generally used, is the outermost or uppermost layer of our Components"
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Paper component</Heading>
            <Paragraph>
                The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.
            </Paragraph>
            <Paragraph>
                The <Code>Paper</Code> is kinda special. Because it allows the <Code>style</Code> property, you can pass almost any CSS Property directly to the React component.
            </Paragraph>
            <Playground
                isOpenByDefault={true}
                codeText={
`
<Paper
    is="section"
    style={{
        background: 'lightblue',
        marginLeft: 12,
        marginTop: 24,
        marginBottom: 24,
        paddingTop: 12,
        paddingLeft: 40,
        paddingRight: 40,
        width: 120,
        height: 120,
        cursor: 'help'
    }}
    onClick={() => alert('Works just like expected')}
/>
`
                }
            />
            <Heading size={800}>Elevation styles</Heading>
            <Paragraph>
                <Code>Paper</Code> has a elevation property to give the component a box shadow and visually elevate it from the page.
            </Paragraph>
            <Paragraph>
                Most commonly you will be only using <Code>0</Code>, <Code>1</Code> and <Code>2</Code>.
            </Paragraph>
            <Playground
                isOpenByDefault={false}
                codeText={
`
<Paper
    style={{
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'row',
    }}
>
    <Paper
        style={{
            height: 120,
            width: 180,
            margin: 24,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
        }}
    >
        <Text>Elevation 0</Text>
        <Text size={300}>Flat Papers</Text>
    </Paper>

    <Paper
        elevation={1}
        style={{
            height: 120,
            width: 180,
            margin: 24,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
        }}>
        <Text>Elevation 1</Text>
        <Text size={300}>Floating Papers</Text>
    </Paper>

    <Paper
        elevation={2}
        style={{
            height: 120,
            width: 180,
            margin: 24,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
        }}>
        <Text>Elevation 2</Text>
        <Text size={300}>Popovers and Dropdowns</Text>
    </Paper>

    <Paper
        elevation={3}
        style={{
            height: 120,
            width: 180,
            margin: 24,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
        }}>
        <Text>Elevation 3</Text>
        <Text size={300}>Toasts</Text>
    </Paper>

    <Paper
        elevation={4}
        style={{
            height: 120,
            width: 180,
            margin: 24,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            flexDirection: 'column',
        }}>
        <Text>Elevation 4</Text>
        <Text size={300}>Dialog</Text>
    </Paper>
</Paper>
`
                }
            />
        </Layout>
    )
}