"use client";

import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";

export const inputClass = "w-full min-h-12 rounded-xl border border-gray-200 bg-white px-3.5 text-base text-[#003D5B] outline-none transition focus:border-[#30638E] focus:ring-3 focus:ring-[#30638E]/10 dark:border-border dark:bg-surface-muted dark:text-white";

export function PasswordField({ name, label, autoComplete, minLength, hint }: {
  name: string; label: string; autoComplete: string; minLength?: number; hint?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <label htmlFor={name} className="mb-2 block text-sm font-medium">{label}</label>
      <div className="relative">
        <input id={name} name={name} type={visible ? "text" : "password"} autoComplete={autoComplete}
          required minLength={minLength} className={`${inputClass} pr-14`} aria-describedby={hint ? `${name}-hint` : undefined} />
        <button type="button" onClick={() => setVisible(!visible)} aria-label={`${visible ? "Hide" : "Show"} ${label.toLowerCase()}`}
          className="absolute right-1 top-0.5 grid h-11 w-11 place-items-center rounded-lg text-gray-500 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-[#30638E] dark:hover:bg-white/5">
          {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
        </button>
      </div>
      {hint && <p id={`${name}-hint`} className="mt-2 text-xs leading-relaxed text-gray-500 dark:text-gray-400">{hint}</p>}
    </div>
  );
}