lti-web-client/src/components/input/PasswordInput.tsx

'use client';

import { useState } from 'react';

import { Icon } from '@iconify/react';
import TextInput, { TextInputProps } from '@/components/input/TextInput';
import Button from '@/components/Button';

type PasswordInputProps = Omit<
  TextInputProps,
  'type' | 'startAdornment' | 'endAdornment'
>;

const PasswordInput = (props: PasswordInputProps) => {
  const [type, setType] = useState('password');

  const showPasswordHandler = () => {
    setType((prevType) => {
      if (prevType === 'password') return 'text';

      return 'password';
    });
  };

  return (
    <TextInput
      {...props}
      type={type}
      endAdornment={
        <Button
          tabIndex={-1}
          type='button'
          variant='ghost'
          onClick={showPasswordHandler}
          className='btn btn-ghost w-fit h-fit p-2 rounded-full'
          disabled={props.disabled}
        >
          <Icon
            icon={type === 'password' ? 'mdi:eye' : 'mdi:eye-off'}
            width={16}
            height={16}
          />
        </Button>
      }
    />
  );
};

export default PasswordInput;