import { useState } from 'react';
import Label from './Label';

export default function Password({
    label,
    name,
    required,
    isReading,
    className,
    ...props
}: Inputs.Password) {
    const [read, setRead] = useState<boolean>(false);
    return (
        <div>
            {label && (
                <Label
                    name={typeof label === 'string' ? label : label.text}
                    htmlFor={name}
                    className={
                        typeof label === 'string' ? undefined : label.className
                    }
                    required={required}
                />
            )}
            <input
                name={name}
                id={name}
                type={read ? 'text' : 'password'}
                required={required}
                className={`darkAltContainer text ${className}`}
                {...props}
            />
            {isReading && (
                <label>
                    <input
                        name='PASSWORD_VISIBILITY'
                        type='checkbox'
                        checked={read}
                        readOnly
                        onClick={() => setRead(!read)}
                        className='cursor-pointer'
                    />
                    <small className='cursor-pointer select-none text text-gray-500'>
                        {' '}
                        Visualizar contraseña
                    </small>
                </label>
            )}
        </div>
    );
}