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

const sizes: Array<string | undefined> = ["xs", "sm", "md", "lg", "xl", undefined];
const options = [
    {
        value: 'option1',
        label: 'Option 1',
    },
    {
        value: 'option2',
        label: 'Option 2',
    },
    {
        value: 'option3',
        label: 'Option 3'
    }
]

const SelectExample = (): ReactElement => {
    return <><div className='flex flex-col gap-4 p-20'>{
        sizes.map((size) => {
            const variant = ['alert', 'create', 'ghost', 'default', 'submit'][Math.floor(Math.random() * 5)]
            return <SelectInput
                key={size || 'default'}
                id='select-example'
                testId='select-example'
                size={size}
                options={options}
                placeholder={`Select an option (${size}) (${variant})`}
                label={`Select Input (${size}) (${variant})`}
                variant={variant}
                onChange={(value) => console.log(`Selected: ${value}`)} />

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

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

            ))
        }</div>
    </>

}

export default SelectExample