"use client";
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
import { UseFormReturn } from "react-hook-form";
import Input from "./Input";

type Props = {
  form: UseFormReturn<any, any, undefined>;
  placeholder?: string;
  label?: string;
  className?: string;
};
const PasswordInput = ({
  form,
  label = "password",
  placeholder = "password",
  className = "",
}: Props) => {
  const [showEye, setShowEye] = useState(false);
  return (
    <div className="relative">
      <Input
        className={className}
        form={form}
        placeholder={placeholder}
        name="password"
        label={label}
        type={showEye ? "text" : "password"}
      />
      <button
        onClick={() => setShowEye((prev) => !prev)}
        type="button"
        className="absolute top-12 rtl:left-2 ltr:right-2 "
      >
        {!showEye ? (
          <EyeOff size={15} className="text-textGray-500" />
        ) : (
          <Eye size={15} className="text-textGray-500" />
        )}
      </button>
    </div>
  );
};

export default PasswordInput;