"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 (
		// Important for flex layouts:
		// - w-full ensures the box fills its container width.
		// - min-w-0 allows the input row to shrink without overflow.
		<div className="grid w-full min-w-0 gap-2">
			<Label htmlFor="q">Suchbegriff</Label>

			<div className="flex w-full min-w-0 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}
					// Make the input take the remaining space next to the button.
					className="flex-1 min-w-0"
				/>

				<Button
					type="submit"
					disabled={!canSearch || isSubmitting}
					className="shrink-0"
				>
					<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>
	);
}