import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Scanner } from "@/app/(app)/geraete/scannen/scanner";

export const metadata = { title: "Gerät scannen" };

export default function ScannenSeite() {
  return (
    <div className="mx-auto max-w-2xl space-y-6">
      <div>
        <Button variant="ghost" size="sm" asChild className="-ml-2 mb-1">
          <Link href="/geraete">
            <ArrowLeft aria-hidden />
            Zurück zur Liste
          </Link>
        </Button>
        <h1 className="text-2xl font-semibold tracking-tight">Gerät scannen</h1>
        <p className="text-sm text-[var(--muted-foreground)]">
          QR-Code auf dem Geräteetikett vor die Kamera halten. Die Gerätedetailseite
          öffnet sich dann von selbst.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Kamera</CardTitle>
          <CardDescription>
            Der Browser fragt beim ersten Mal nach der Freigabe. Das Bild verlässt das
            Gerät nicht — ausgewertet wird direkt im Browser.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Scanner />
        </CardContent>
      </Card>
    </div>
  );
}