import React from 'react'
import {Box, FormControl, FormLabel} from '@chakra-ui/react'
import {Select} from 'chakra-react-select'

interface Props {
    label: string
    textField: string
    field: string
    bg: string
    handleAccessedBy: any
    options: { value: string, label: string }[]
    width?: string
}

const SelectInput = ({label, textField, field, bg, handleAccessedBy, options, width = ''}: Props) => {
    return (
        <FormControl mb="3">
            <FormLabel>{label}</FormLabel>
            <Box
                bg={bg}
                w={width}
                border="1px"
                borderColor="gray.500"
                rounded="md">
                <Select
                    id={textField}
                    name={textField}
                    onChange={(values) => {
                        if (values) handleAccessedBy(textField, values.value)
                    }}
                    options={options}
                    value={{
                        value: field,
                        label: field,
                    }}
                />
            </Box>
        </FormControl>
    )
}

export default SelectInput