Barcode Scan Input

"use client";

import { useState } from "react";
import BarcodeScanInput from "@/components/ui/barcodescaninput";

export default function BarcodeScanInputDemo() {
  const [scans, setScans] = useState<string[]>([]);

  return (
    <div className="mx-auto max-w-md space-y-4 p-6">
      <BarcodeScanInput
        onScan={(code) => setScans((prev) => [code, ...prev].slice(0, 8))}
        placeholder="Scan or type a barcode…"
        hint="Focus stays here for back-to-back scans — press Enter to submit."
      />

      <div className="rounded-lg border border-slate-200 p-4">
        <p className="mb-2 text-xs font-medium uppercase text-slate-400">Recent scans</p>
        {scans.length === 0 ? (
          <p className="text-sm text-slate-400">Nothing scanned yet — try typing a code and pressing Enter.</p>
        ) : (
          <ul className="space-y-1 text-sm text-slate-700">
            {scans.map((code, i) => (
              <li key={i} className="font-mono">
                {code}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}