"use client";

import { useState } from "react";
import { GitBranch } from "lucide-react";
import { Button } from "@/components/ui/button";
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 [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
        <GitBranch className="h-4 w-4" />
        Variations
      </Button>
      <VariationsDialog
        recipeId={recipeId}
        baseServings={baseServings}
        difficulty={difficulty}
        prepMins={prepMins}
        cookMins={cookMins}
        ingredients={ingredients}
        steps={steps}
        open={open}
        onOpenChange={setOpen}
      />
    </>
  );
}