import { useState } from 'react';

import { Icon } from '@/app/Icon';

interface PasswordInputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  autoComplete?: string;
  error?: string;
  maxLength?: number;
}

export function PasswordInput({ value, onChange, placeholder, autoComplete, error, maxLength }: PasswordInputProps) {
  const [visible, setVisible] = useState(false);

  return (
    <div className="flex flex-col gap-1.5">
      <div
        className={`flex h-[50px] items-center rounded-lg bg-surface-input px-3.5 has-focus:border has-focus:shadow-focus-ring ${
          error ? 'border border-danger-text' : 'has-focus:border-focus-border'
        }`}
      >
        <input
          type={visible ? 'text' : 'password'}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          autoComplete={autoComplete}
          maxLength={maxLength}
          className="w-full bg-transparent text-[15px] outline-none"
        />
        <button
          type="button"
          onClick={() => setVisible((v) => !v)}
          aria-label={visible ? '隐藏密码' : '显示密码'}
          className="text-text-placeholder-2"
        >
          <Icon name={visible ? 'visibility' : 'visibility_off'} className="text-[20px]" />
        </button>
      </div>
      {error ? <div className="text-xs text-danger-border">{error}</div> : null}
    </div>
  );
}