import { useId, type InputHTMLAttributes } from 'react'
import { cn } from '../../lib/cn'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string
}

/**
 * Labeled text input in the terminal idiom. The label is wired to the input via
 * a generated id, so consumers (and tests) can query it by its accessible name.
 */
export default function Input({ label, id, className, ...props }: InputProps) {
  const generatedId = useId()
  const inputId = id ?? generatedId

  return (
    <div className="space-y-1">
      <label
        htmlFor={inputId}
        className="text-primary block font-mono text-sm uppercase tracking-wide"
      >
        {label}
      </label>
      <input
        id={inputId}
        className={cn(
          'border-primary text-primary focus:ring-ring w-full border-2 bg-background px-3 py-2 font-mono focus:outline-none focus:ring-2',
          className,
        )}
        {...props}
      />
    </div>
  )
}