import { useState } from 'react';
import Icon from './Icon.jsx';

export default function PasswordField({ value, onChange, placeholder }) {
  const [visible, setVisible] = useState(false);

  return (
    <div className="password-field">
      <input
        type={visible ? 'text' : 'password'}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        required
      />
      <button
        type="button"
        className="password-toggle"
        onClick={() => setVisible((v) => !v)}
        aria-label={visible ? 'Ukryj hasło' : 'Pokaż hasło'}
      >
        <Icon name={visible ? 'visibility_off' : 'visibility'} />
      </button>
    </div>
  );
}