Epicure/apps/web/components/recipe/variations-button.tsx

"use client";

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

export function VariationsButton({
  recipeId,
  baseServings,
  difficulty,
  prepMins,
  cookMins,
  ingredients,
  steps,
  locked = false,
}: {
  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 }>;
  locked?: boolean;
}) {
  const t = useTranslations("recipe");
  const [open, setOpen] = useState(false);
  const [upgradeOpen, setUpgradeOpen] = useState(false);

  return (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button
              variant="ghost"
              size="icon"
              onClick={() => (locked ? setUpgradeOpen(true) : setOpen(true))}
              aria-label={t("variationsTooltip")}
            >
              <GitBranch className="h-4 w-4" />
            </Button>
          } />
          <TooltipContent className="flex items-center gap-1.5">
            {t("variationsTooltip")}
            {locked && <Badge variant="secondary" className="text-[10px] px-1 py-0 leading-4">Pro</Badge>}
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <VariationsDialog
        recipeId={recipeId}
        baseServings={baseServings}
        difficulty={difficulty}
        prepMins={prepMins}
        cookMins={cookMins}
        ingredients={ingredients}
        steps={steps}
        open={open}
        onOpenChange={setOpen}
      />
      <UpgradeDialog
        open={upgradeOpen}
        onOpenChange={setUpgradeOpen}
        featureKey="recipe_variations"
        featureLabel="Recipe variations"
      />
    </>
  );
}