Epicure/apps/web/components/recipe/recipes-header.tsx

"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import { useRouter, usePathname } from "next/navigation";
import { PlusCircle, Sparkles, Link2, Search, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { AiGenerateDialog } from "./ai-generate-dialog";
import { UrlImportDialog } from "./url-import-dialog";
import { cn } from "@/lib/utils";

export function RecipesHeader({ count, initialQuery = "" }: { count: number; initialQuery?: string }) {
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("recipes");
  const [aiOpen, setAiOpen] = useState(false);
  const [urlOpen, setUrlOpen] = useState(false);
  const [query, setQuery] = useState(initialQuery);
  const [, startTransition] = useTransition();

  function handleSearch(value: string) {
    setQuery(value);
    startTransition(() => {
      const params = new URLSearchParams();
      if (value.trim()) params.set("q", value.trim());
      router.push(`${pathname}?${params.toString()}`);
    });
  }

  return (
    <>
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
            <p className="text-muted-foreground mt-1">
              {count === 0
                ? t("subtitle")
                : t(count !== 1 ? "resultPlural" : "resultSingular", { count })}
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => setUrlOpen(true)}>
              <Link2 className="h-4 w-4" />
              {t("importUrl")}
            </Button>
            <Button variant="outline" size="sm" onClick={() => setAiOpen(true)}>
              <Sparkles className="h-4 w-4" />
              {t("generate")}
            </Button>
            <Link href="/recipes/new" className={cn(buttonVariants({ size: "sm" }))}>
              <PlusCircle className="h-4 w-4" />
              {t("new")}
            </Link>
          </div>
        </div>

        <div className="relative max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
          <Input
            value={query}
            onChange={(e) => handleSearch(e.target.value)}
            placeholder={t("search")}
            className="pl-9 pr-9"
          />
          {query && (
            <button
              onClick={() => handleSearch("")}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>
      </div>

      <AiGenerateDialog open={aiOpen} onOpenChange={setAiOpen} />
      <UrlImportDialog open={urlOpen} onOpenChange={setUrlOpen} />
    </>
  );
}