import { forwardRef, InputHTMLAttributes, useState } from 'react';
import { twx } from '../utils';

export type ButtonInputProps = InputHTMLAttributes<HTMLInputElement>;

export const PasswordInput = forwardRef<
  HTMLInputElement,
  InputHTMLAttributes<HTMLInputElement>
>(function PasswordInput(props, ref) {
  const [isShow, setIsShow] = useState(false);
  return (
    <div className="relative">
      <div className="pointer-events-none absolute start-0 inset-y-0 flex items-center ps-3">
        <div className="i-ant-design-lock-outlined text-orange-600 h-5 w-5"></div>
      </div>
      <input
        type={isShow ? 'text' : 'password'}
        className="focus:border-blue-500 focus:ring-blue-500 block w-full border border-gray-300 rounded-lg bg-white p-2.5 ps-10 text-sm text-gray-900"
        required
        ref={ref}
        {...props}
      />
      <div className="absolute right-0 top-0 h-full flex items-center px-4">
        <button
          type="button"
          className={twx(
            `text-2xl text-black/50`,
            isShow ? 'i-mdi-eye-outline' : 'i-mdi-eye-off-outline',
          )}
          onClick={() => {
            setIsShow(!isShow);
          }}
        />
      </div>
      <label className="sr-only mb-2 text-sm text-gray-900 font-medium dark:text-white">
        Search
      </label>
    </div>
  );
});
