"use client";

import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { ChefHat } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLocale } from "@/lib/i18n/provider";
import { MarkCookedDialog } from "./mark-cooked-dialog";

export function MarkCookedSection({
  recipeId,
  baseServings,
  cookCount,
  lastCookedAt,
}: {
  recipeId: string;
  baseServings: number;
  cookCount: number;
  lastCookedAt: string | null;
}) {
  const t = useTranslations("recipe");
  const router = useRouter();
  const { locale } = useLocale();

  return (
    <div className="flex items-center gap-3">
      <MarkCookedDialog
        recipeId={recipeId}
        baseServings={baseServings}
        onLogged={() => router.refresh()}
        trigger={
          <Button type="button" variant="outline" size="sm">
            <ChefHat className="h-3.5 w-3.5" />
            {t("markCookedButton")}
          </Button>
        }
      />
      {cookCount > 0 && (
        <p className="text-xs text-muted-foreground">
          {cookCount === 1 ? t("markCookedCountSingular") : t("markCookedCountPlural", { count: cookCount })}
          {lastCookedAt && t("markCookedLast", { date: new Date(lastCookedAt).toLocaleDateString(locale, { month: "short", day: "numeric" }) })}
        </p>
      )}
    </div>
  );
}