"use client";

import { useTransition } from "react";
import { setActiveSite } from "./actions";

export function SiteSwitcher({
  sites,
  activeSiteId,
}: {
  sites: { id: string; name: string; organization: { name: string } }[];
  activeSiteId: string | null;
}) {
  const [pending, startTransition] = useTransition();
  if (sites.length === 0) return null;
  return (
    <label className="flex items-center gap-2 text-sm">
      <span className="sr-only">Active site</span>
      <select
        className="h-9 max-w-52 rounded-md border border-border bg-card px-2 text-sm"
        value={activeSiteId ?? ""}
        disabled={pending}
        onChange={(event) => {
          const formData = new FormData();
          formData.set("siteId", event.target.value);
          startTransition(() => setActiveSite(formData));
        }}
      >
        <option value="">All sites</option>
        {sites.map((site) => (
          <option key={site.id} value={site.id}>
            {site.name} · {site.organization.name}
          </option>
        ))}
      </select>
    </label>
  );
}