import { IconEye as Eye, IconEyeOff as EyeOff } from '@tabler/icons-react'

export interface RevealToggleProps {
  revealed: boolean
  onToggle: () => void
  label?: string
}

/** Trailing show/hide toggle for passphrase fields. */
export function RevealToggle({ revealed, onToggle, label = 'passphrase' }: RevealToggleProps) {
  return (
    <button
      type="button"
      onClick={onToggle}
      aria-label={revealed ? `Hide ${label}` : `Reveal ${label}`}
      className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
    >
      {revealed ? <EyeOff size={16} aria-hidden /> : <Eye size={16} aria-hidden />}
    </button>
  )
}