/* A PIN field with the phone's number pad, switchable to the full keyboard for people who prefer a password. */
import { useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { Input } from './ui';

export default function PinInput({ id, value, onChange, invalid, autoComplete = 'current-password', allowLetters = true }: {
    id: string; value: string; onChange: (v: string) => void; invalid?: boolean; autoComplete?: string; allowLetters?: boolean;
}) {
    const [letters, setLetters] = useState(false);
    const [shown, setShown] = useState(false);
    return (
        <div>
            <div className="relative">
                <Input id={id} type={shown ? 'text' : 'password'} inputMode={letters ? 'text' : 'numeric'} autoComplete={autoComplete}
                    value={value} onChange={(e) => onChange(e.target.value)} invalid={invalid} className="pr-11 tracking-widest" />
                <button type="button" onClick={() => setShown((s) => !s)} className="absolute inset-y-0 right-0 grid w-11 place-items-center text-muted hover:text-ink" aria-label={shown ? 'Hide' : 'Show'}>
                    {shown ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                </button>
            </div>
            {allowLetters && (
                <button type="button" onClick={() => setLetters((l) => !l)} className="mt-1.5 text-xs font-semibold text-brand hover:underline">
                    {letters ? 'Use the number pad' : 'Use letters (a password) instead'}
                </button>
            )}
        </div>
    );
}