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

export default function Textarea() {
    return (
        <Layout
            title="Textarea"
            showHero
            description="A Textarea Component for simple Inputs."
            sidebar={ComponentsSidebar}
        >
            <Heading size={800}>Default</Heading>
            <Paragraph>
                Provides a standard way to create a text-based form input.
            </Paragraph>
            <Playground
                codeText={`<Textarea placeholder="I am a placeholder" />`}
            />

            <Heading size={800}>Disabled</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
`<Textarea disabled>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</Textarea>
`
                }
            />

            <Heading size={800}>Invalid</Heading>
            <Playground
                isOpenByDefault={false}
                codeText={
`<Textarea
    isInvalid
    defaultValue="invalid default value"
/>
`
                }
            />
        </Layout>
    )
}
