import React, {ReactNode, useState} from 'react';
import Typography from "../Typography/Typography";
import PageTitle from "../Typography/PageTitle";
import PageSubTitle from "../Typography/PageSubtitle";

interface TypographiesProps {
    children?: ReactNode
}

const Typographies = ({children}: TypographiesProps) => {

    const [typopgraphyProps, setTypopgraphyProps] = useState({
        size: '16',
        color: '303030',
        spacing: '0.5'
    })

    return (
        <div>
            <PageTitle>
                Ο Τίτλος της Σελίδας
            </PageTitle>

            <PageSubTitle>
                Αυτό ειναι κείμενο που μπαίνει κάτω από τον τίτλο
            </PageSubTitle>

            <div className="row">
                <div className="col">
                    <p>SIZE - {typopgraphyProps.size}px</p>
                    <input type="range" min="5" max="50" value={typopgraphyProps.size}
                           onChange={(e) => setTypopgraphyProps({
                               ...typopgraphyProps,
                               size: e.target.value
                           })}/>
                </div>
                <div className="col">
                    <p>spacing - {typopgraphyProps.spacing}px</p>
                    <input type="range" min="0" max="10" value={typopgraphyProps.spacing} step={0.1}
                           onChange={(e) => setTypopgraphyProps({
                               ...typopgraphyProps,
                               spacing: e.target.value
                           })}/>
                </div>
                <div className="col">
                    <p>#</p>
                    <input type="text" value={typopgraphyProps.color} onChange={(e) => {
                        setTypopgraphyProps({
                            ...typopgraphyProps,
                            color: e.target.value
                        })
                    }}/>
                </div>
            </div>
            <Typography
                tag={'p'}
                className={'mt-5'}
                fontSize={`${typopgraphyProps.size}px`}
                color={'#' + typopgraphyProps.color}
                letterSpacing={`${typopgraphyProps.spacing}px`}
            >
                hello i was made by typography
            </Typography>

        </div>
    );
}

export default Typographies;