import React from 'react'
import {Box} from '@chakra-ui/react'
import { Field } from '../ui/field'
import {Select} from '../FixedSelect'

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 (
        <Field mb="3" label={label}>
            <Box
                bg={bg}
                w={width || 'full'}
                rounded="md">
                <Select
                    id={textField}
                    name={textField}
                    onChange={(values: any) => {
                        if (values) handleAccessedBy(textField, values.value)
                    }}
                    options={options}
                    value={{
                        value: field,
                        label: field,
                    }}
                />
            </Box>
        </Field>
    )
}

export default SelectInput