import { updateStatusAction } from "@/lib/actions/products";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { ProductStatus } from "@/lib/data";
import { STATUS_LABELS } from "@/components/StatusBadge";

const OPTIONS: { value: ProductStatus; className: string }[] = [
  { value: "a_discuter", className: "data-[active=true]:bg-amber-500" },
  { value: "garder", className: "data-[active=true]:bg-emerald-600" },
  { value: "rejeter", className: "data-[active=true]:bg-red-600" },
];

export function StatusSelector({
  productId,
  current,
}: {
  productId: string;
  current: ProductStatus;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {OPTIONS.map((opt) => {
        const isActive = current === opt.value;
        const action = updateStatusAction.bind(null, productId, opt.value);
        return (
          <form action={action} key={opt.value}>
            <Button
              type="submit"
              variant={isActive ? "default" : "outline"}
              data-active={isActive}
              className={cn(isActive && [opt.className, "text-white"])}
            >
              {STATUS_LABELS[opt.value]}
            </Button>
          </form>
        );
      })}
    </div>
  );
}