"use client";

import React, { ComponentProps, useState } from "react";
import { cn } from "@/lib/utils";

type AuthPasswordInputProps = Omit<ComponentProps<"input">, "type"> & {
  wrapperClassName?: string;
  error?: boolean;
  success?: boolean;
};

function AuthPasswordInput({
  style,
  className,
  wrapperClassName,
  error,
  success,
  ...rest
}: AuthPasswordInputProps) {
  const [visible, setVisible] = useState(false);

  return (
    <div className={cn("relative w-full max-w-[290px]", wrapperClassName)}>
      <input
        type={visible ? "text" : "password"}
        className={cn(
          "w-full dir-ltr p-3.5 px-12 text-center text-lg font-semibold rounded-2xl",
          "border-2 bg-white text-gray-900 placeholder:text-gray-400",
          "dark:bg-white dark:text-gray-900 dark:placeholder:text-gray-500",
          "shadow-sm transition-[border-color,box-shadow] duration-200",
          success
            ? "border-green-500 ring-2 ring-green-500/30 focus:border-green-500 focus:ring-green-500/30"
            : error
              ? "border-red-500 ring-2 ring-red-500/20 focus:border-red-500 focus:ring-red-500/30"
              : "border-gray-200 dark:border-gray-300 focus:outline-none focus:border-[#387E65] focus:ring-2 focus:ring-[#387E65]/30",
          className
        )}
        style={{ ...style }}
        {...rest}
      />
      <button
        type="button"
        onClick={() => setVisible((prev) => !prev)}
        className="absolute right-3 top-1/2 -translate-y-1/2 m-0 flex size-[22px] items-center justify-center rounded p-0 hover:opacity-70 transition-opacity"
        aria-label={visible ? "مخفی کردن کلمه عبور" : "نمایش کلمه عبور"}
        tabIndex={-1}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={visible ? "/images/icons/eye-slash.svg" : "/images/icons/eye-open.svg"}
          alt=""
          width={22}
          height={22}
          className="block size-[22px] object-contain object-center opacity-80 dark:invert"
          draggable={false}
        />
      </button>
    </div>
  );
}

export default AuthPasswordInput;
