"use client";

import { useTransition } from "react";
import { ORDER_TAGS, ORDER_TAG_LABELS } from "@/lib/orderConstants";
import { updateOrderTagAction } from "@/lib/actions/admin";

export function OrderTagSelect({ orderId, tag }: { orderId: string; tag: string }) {
  const [pending, startTransition] = useTransition();

  return (
    <select
      value={tag}
      disabled={pending}
      onChange={(e) => {
        const next = e.target.value;
        startTransition(() => updateOrderTagAction(orderId, next));
      }}
      className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs text-[var(--rk-ink)] focus:outline-none focus:border-white/50 disabled:opacity-50"
    >
      {ORDER_TAGS.map((t) => (
        <option key={t} value={t}>
          {ORDER_TAG_LABELS[t]}
        </option>
      ))}
    </select>
  );
}