"use client";

import React from "react";
import { Search } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function SearchQueryBox({
	qDraft,
	onQDraftChange,
	onSubmit,
	currentQuery,
	isSubmitting,
	canSearch,
}) {
	return (
		<div className="grid gap-2">
			<Label htmlFor="q">Suchbegriff</Label>

			<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
				<Input
					id="q"
					name="q"
					value={qDraft}
					onChange={(e) => onQDraftChange(e.target.value)}
					placeholder="z. B. Bridgestone, Rechnung, Kundennummer…"
					disabled={isSubmitting}
					className="flex-1"
				/>

				<Button type="submit" disabled={!canSearch || isSubmitting}>
					<Search className="h-4 w-4" />
					Suchen
				</Button>
			</div>

			{currentQuery ? (
				<div className="text-xs text-muted-foreground">
					Aktuelle Suche:{" "}
					<span className="ml-1 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
						{currentQuery}
					</span>
				</div>
			) : (
				<div className="text-xs text-muted-foreground">
					Tipp: Die Suche ist URL-basiert und kann als Link geteilt werden.
				</div>
			)}
		</div>
	);
}