'use client';

const MAX_LENGTH = 2048;

interface QRInputProps {
  value: string;
  onChange: (value: string) => void;
}

export function QRInput({ value, onChange }: QRInputProps) {
  return (
    <div>
      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
        Content
      </span>
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Enter text or URL…"
        maxLength={MAX_LENGTH}
        rows={4}
        className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30 resize-none"
      />
      <div className="text-[9px] text-muted-foreground/30 font-mono text-right mt-1 tabular-nums">
        {value.length} / {MAX_LENGTH}
      </div>
    </div>
  );
}