"use client";

/**
 * TASK-0133 — the workspace picker for the two WORKSPACE-scoped console tabs
 * (API keys / webhooks). The org-admin API is org-scoped, but API keys and
 * webhooks are per-workspace, so these tabs operate on the selected
 * workspace. Controlled by the console page (one source of truth shared by
 * both tabs).
 */
import { Boxes } from "lucide-react";
import type { OrgWorkspaceRow } from "@/lib/org-admin";

interface WorkspacePickerProps {
  orgId: string;
  workspaces: OrgWorkspaceRow[];
  value: string | null;
  onChange: (id: string) => void;
}

export function WorkspacePicker({ workspaces, value, onChange }: WorkspacePickerProps) {
  if (workspaces.length === 0) {
    return (
      <div className="flex items-center gap-2 rounded-lg border border-border p-4 text-sm text-muted-foreground">
        <Boxes className="size-4" />
        This organization has no (non-personal) workspaces yet.
      </div>
    );
  }
  return (
    <div className="flex items-center gap-2 rounded-lg border border-border p-3">
      <Boxes className="size-4 text-muted-foreground" aria-hidden />
      <span className="text-xs font-medium text-muted-foreground">Workspace</span>
      <select
        aria-label="Select workspace"
        className="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value)}
      >
        {workspaces.map((w) => (
          <option key={w.id} value={w.id}>
            {w.name}
          </option>
        ))}
      </select>
    </div>
  );
}