'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';

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

const MAX_LENGTH = 2048;

export function QRInput({ value, onChange }: QRInputProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Text</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <Textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="Enter text or URL..."
          maxLength={MAX_LENGTH}
          rows={3}
          className="resize-none font-mono text-sm"
        />
        <div className="text-[10px] text-muted-foreground text-right">
          {value.length} / {MAX_LENGTH}
        </div>
      </CardContent>
    </Card>
  );
}