"use client";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { PlusCircle } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function RecipesEmptyState({ query, count }: { query: string; count: number }) {
  const t = useTranslations("recipes");
  if (count > 0) {
    return query ? (
      <p className="text-sm text-muted-foreground">
        {count} {count !== 1 ? t("resultPlural") : t("resultSingular")} {t("for")} &ldquo;{query}&rdquo;
      </p>
    ) : null;
  }
  return (
    <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
      {query ? (
        <>
          <p className="text-muted-foreground text-sm">{t("noMatch")} &ldquo;{query}&rdquo;</p>
          <Link href="/recipes" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
            {t("clearSearch")}
          </Link>
        </>
      ) : (
        <>
          <p className="text-muted-foreground text-sm">{t("noRecipes")}</p>
          <Link href="/recipes/new" className={cn(buttonVariants({ size: "sm" }))}>
            <PlusCircle className="h-4 w-4" />
            {t("createFirst")}
          </Link>
        </>
      )}
    </div>
  );
}