import { type FC, type SelectHTMLAttributes } from 'react'
import { clx } from '../helpers/utils'
import { ArrowDown2 } from 'iconsax-react'
import Error from './Error'

export type ItemsSelectType = {
    value: string,
    label: string,
}
type Props = {
    className?: string,
    items: ItemsSelectType[],
    error_text?: string,
    placeholder?: string,
    label?: string,
} & SelectHTMLAttributes<HTMLSelectElement>

const Select: FC<Props> = (props: Props) => {
    return (
        <div className='w-full relative'>
            {
                props.label &&
                <label className='text-sm'>
                    {props.label}
                </label>
            }
            <select {...props} className={clx(
                'w-full text-black block border appearance-none border-border px-2.5 h-10 text-sm rounded-[10px] bg-gray',
                props.className,
                props.label && 'mt-1'
            )}>
                {
                    props.placeholder &&
                    <option value="" disabled selected>{props.placeholder}</option>
                }
                {
                    props.items?.map((item) => {
                        return (
                            <option key={item.value} value={item.value}>
                                {item.label}
                            </option>
                        )
                    })
                }
            </select>
            <ArrowDown2 size={16} color='black' className={clx(
                'absolute z-0 top-3 left-2',
                props.label && 'top-10'
            )} />
            {
                props.error_text && props.error_text !== '' ?
                    <Error
                        errorText={props.error_text}
                    />
                    : null
            }
        </div>

    )
}

export default Select