import Input from "@/Components/Inputs/Input";
import SelectInput from "@/Components/Inputs/Select";
import React, { ReactElement } from "react";

const sizes: Array<string | undefined> = ["xs", "sm", "md", "lg", "xl", undefined];

const InputExample = (): ReactElement => {
    return <><div className='flex flex-col gap-4 p-20'>{
        sizes.map((size) => (

            <Input
                key={size || 'default'}
                id='select-example'
                testId='select-example'
                size={size}
                placeholder={`Enter text (${size})`}
                label={`Input (${size})`}
                onChange={(value) => console.log(`Selected: ${value}`)} />

        ))
    }</div>
        <div className='flex flex-row gap-8 p-20'>{
            sizes.map((size) => (

                <Input
                    key={size || 'default'}
                    id='select-example'
                    testId='select-example'
                    size={size}
                    placeholder={`Enter text (${size})`}
                    label={`Input (${size})`}
                    onChange={(value) => console.log(`Selected: ${value}`)} />

            ))
        }</div>
    </>

}

export default InputExample