Epicure/apps/web/components/recipe/batch-cook-fields.tsx

"use client";

import { useTranslations } from "next-intl";
import { Minus, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

function Counter({
  value,
  onChange,
  max = 6,
  disabled,
}: {
  value: number;
  onChange: (v: number) => void;
  max?: number;
  disabled?: boolean;
}) {
  return (
    <div className="flex items-center gap-2">
      <Button type="button" variant="outline" size="icon" disabled={disabled} onClick={() => onChange(Math.max(0, value - 1))}>
        <Minus className="h-4 w-4" />
      </Button>
      <span className="w-8 text-center font-medium tabular-nums">{value}</span>
      <Button type="button" variant="outline" size="icon" disabled={disabled} onClick={() => onChange(Math.min(max, value + 1))}>
        <Plus className="h-4 w-4" />
      </Button>
    </div>
  );
}

export type BatchCookFieldsState = {
  dinners: number;
  lunches: number;
  servings: number;
  difficulty: "" | "easy" | "medium" | "hard";
  dietaryPrefs: string;
  description: string;
};

export function BatchCookFields({
  state,
  onChange,
  disabled,
}: {
  state: BatchCookFieldsState;
  onChange: (state: BatchCookFieldsState) => void;
  disabled?: boolean;
}) {
  const t = useTranslations("batchCooking");
  const tCommon = useTranslations("common");
  const tRecipe = useTranslations("recipe");

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="batch-description">{t("describe")}</Label>
        <Textarea
          id="batch-description"
          value={state.description}
          onChange={(e) => onChange({ ...state, description: e.target.value })}
          placeholder={t("describePlaceholder")}
          rows={3}
          disabled={disabled}
        />
      </div>
      <div className="flex items-center justify-between">
        <Label>{t("dinners")}</Label>
        <Counter value={state.dinners} onChange={(v) => onChange({ ...state, dinners: v })} disabled={disabled} />
      </div>
      <div className="flex items-center justify-between">
        <Label>{t("lunches")}</Label>
        <Counter value={state.lunches} onChange={(v) => onChange({ ...state, lunches: v })} disabled={disabled} />
      </div>
      <div className="flex items-center justify-between">
        <Label>{t("servingsPerMeal")}</Label>
        <Counter value={state.servings} onChange={(v) => onChange({ ...state, servings: v })} max={12} disabled={disabled} />
      </div>
      <div className="space-y-2">
        <Label>{tCommon("difficulty")}</Label>
        <Select
          value={state.difficulty}
          onValueChange={(v) => onChange({ ...state, difficulty: v as BatchCookFieldsState["difficulty"] })}
          disabled={disabled}
        >
          <SelectTrigger>
            <SelectValue placeholder={t("anyDifficulty")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="">{t("anyDifficulty")}</SelectItem>
            <SelectItem value="easy">{tRecipe("difficulty.easy")}</SelectItem>
            <SelectItem value="medium">{tRecipe("difficulty.medium")}</SelectItem>
            <SelectItem value="hard">{tRecipe("difficulty.hard")}</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="batch-dietary">{t("dietaryPrefs")}</Label>
        <Input
          id="batch-dietary"
          value={state.dietaryPrefs}
          onChange={(e) => onChange({ ...state, dietaryPrefs: e.target.value })}
          placeholder={t("dietaryPrefsPlaceholder")}
          disabled={disabled}
        />
      </div>
    </div>
  );
}