"use client";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { ChefHat, Printer } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
import { pantryToMarkdown } from "@/lib/markdown/pantry";

type PantryItem = { rawName: string; quantity: string | null; unit: string | null; expiresAt: string | null };

export function PantryPageHeader({ items }: { items: PantryItem[] }) {
  const t = useTranslations("pantry");
  const tCommon = useTranslations("common");
  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
        <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Link href="/recipes/can-cook" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
          <ChefHat className="h-4 w-4" />
          {t("canCook")}
        </Link>
        <a href="/print/pantry" target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
          <Printer className="h-4 w-4" />
          {tCommon("print")}
        </a>
        <ExportMarkdownButton markdown={pantryToMarkdown({ items })} filename="pantry" />
      </div>
    </div>
  );
}