"use client";

import type { FC } from "react";
import { useState } from "react";

import type { InputProps } from "@/components/ui/input/input";
import { Input } from "@/components/ui/input/input";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";

export interface PasswordInputProps extends InputProps {}

const PasswordInput: FC<PasswordInputProps> = (props) => {
  const [inputPasswordType, setInputPasswordType] = useState(true);
  return (
    <Input
      rightIcon={
        <LIcon
          onClick={() => setInputPasswordType(!inputPasswordType)}
          name={inputPasswordType ? "EyeOff" : "Eye"}
        />
      }
      type={inputPasswordType ? "password" : "text"}
      {...props}
    />
  );
};

export { PasswordInput };