"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { GitBranch } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { VariationsDialog } from "./variations-dialog";

export function VariationsButton({
  recipeId,
  baseServings,
  difficulty,
  prepMins,
  cookMins,
  ingredients,
  steps,
}: {
  recipeId: string;
  baseServings: number;
  difficulty?: string | null;
  prepMins?: number | null;
  cookMins?: number | null;
  ingredients: Array<{ rawName: string; quantity?: string | number | null; unit?: string | null; note?: string | null; order: number }>;
  steps: Array<{ instruction: string; timerSeconds?: number | null; order: number }>;
}) {
  const t = useTranslations("recipe");
  const [open, setOpen] = useState(false);

  return (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("variationsTooltip")}>
              <GitBranch className="h-4 w-4" />
            </Button>
          } />
          <TooltipContent>{t("variationsTooltip")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <VariationsDialog
        recipeId={recipeId}
        baseServings={baseServings}
        difficulty={difficulty}
        prepMins={prepMins}
        cookMins={cookMins}
        ingredients={ingredients}
        steps={steps}
        open={open}
        onOpenChange={setOpen}
      />
    </>
  );
}