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

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

const Select: FC<Props> = (props: Props) => {
    return (
        <div className='w-full'>
            {
                props.label &&
                <label className='text-sm'>
                    {props.label}
                </label>
            }
            <div className='relative'>
                <select {...props} className={clx(
                    'w-full text-black relative block border appearance-none border-border px-2.5 h-10 text-sm rounded-2.5 bg-white',
                    props.readOnly && 'bg-gray-100 border-0 text-description',
                    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 pointer-events-none',
                )} />
            </div>
            {
                props.error_text && props.error_text !== '' ?
                    <div className='text-xs text-right text-red-600 mt-2 mr-2 font-medium'>
                        {props.error_text}
                    </div>
                    : null
            }
        </div>

    )
}

export default Select