"use client";

import { useActionState } from "react";
import { updateLabelBrandBlend } from "@/lib/actions/labels";
import { BrandBlendAutocomplete } from "@/components/labels/BrandBlendAutocomplete";

export function EditBrandBlendForm({ labelId }: { labelId: string }) {
  const [state, formAction, isPending] = useActionState(
    updateLabelBrandBlend,
    undefined,
  );

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <input type="hidden" name="labelId" value={labelId} />
      <BrandBlendAutocomplete />
      <button
        type="submit"
        disabled={isPending}
        className="w-fit rounded-full bg-terracotta px-5 py-2 text-sm font-medium text-white hover:bg-terracotta/90 disabled:opacity-60"
      >
        {isPending ? "Saving..." : "Save brand/blend"}
      </button>
      {state?.error && (
        <p className="text-sm text-terracotta">{state.error}</p>
      )}
      {state?.success && (
        <p className="text-sm text-charcoal/60">Updated.</p>
      )}
    </form>
  );
}