import ShiftBy from "@components/shift-by"
import { Spacer, Tabs, Card, Textarea, Text } from "@geist-ui/core"
import Image from 'next/image'
import styles from './home.module.css'
import markdownStyles from '@components/preview/preview.module.css'
const Home = ({ introTitle, introContent, rendered }: {
    introTitle: string
    introContent: string
    rendered: string
}) => {
    return (<><div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
        <ShiftBy y={-2}><Image src={'/assets/logo-optimized.svg'} width={'48px'} height={'48px'} alt="" /></ShiftBy>
        <Spacer />
        <Text style={{ display: 'inline' }} h1>{introTitle}</Text>
    </div>
        <Card>
            <Tabs initialValue={'preview'} hideDivider leftSpace={0}>
                <Tabs.Item label={"Raw"} value="edit">
                    {/* <textarea className={styles.lineCounter} wrap='off' readOnly ref={lineNumberRef}>1.</textarea> */}
                    <div style={{ marginTop: 'var(--gap-half)', display: 'flex', flexDirection: 'column' }}>
                        <Textarea
                            readOnly
                            value={introContent}
                            width="100%"
                            // TODO: Textarea should grow to fill parent if height == 100%
                            style={{ flex: 1, minHeight: 350 }}
                            resize="vertical"
                            className={styles.textarea}
                        />
                    </div>
                </Tabs.Item>
                <Tabs.Item label="Preview" value="preview">
                    <div style={{ marginTop: 'var(--gap-half)', }}>
                        <article className={markdownStyles.markdownPreview} dangerouslySetInnerHTML={{ __html: rendered }} style={{
                            height: "100%"
                        }} />
                    </div>
                </Tabs.Item>
            </Tabs>
        </Card></>)
}

export default Home