import { FC, InputHTMLAttributes, useState } from 'react'
import { clx } from '../helpers/utils';
import EyeIcon from '../assets/images/eye.svg'
import { SearchNormal } from 'iconsax-react';

type Variant = "floating_outlined" | "primary" | "search";

type Props = {
    label?: string;
    className?: string;
    variant?: Variant;
    error_text?: string;
    onEnter?: () => void;
    unit?: string;
    seprator?: boolean;
    isNotRequired?: boolean;
} & InputHTMLAttributes<HTMLInputElement>

const Input: FC<Props> = (props: Props) => {

    const [showPassword, setShowPassword] = useState<boolean>(false)

    const inputClass = clx(
        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
        props.readOnly && 'bg-gray-100 border-0 text-description',
        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
        props.className
    );


    return (
        <div className='w-full'>
            <label className='text-sm'>
                {props.label}
            </label>

            <div className='w-full relative mt-1'>
                <input {...props} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />

                {
                    props.type === 'password' &&
                    <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
                }

                {
                    props.variant === 'search' &&
                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
                }
            </div>
        </div>
    )
}

export default Input