"use client";

import { useExperienceWorkspace } from "@/modules/experience/hooks/useExperienceWorkspace";
import { Select, FormField } from "@/components/ds";
import { ExperienceSkeleton } from "@/modules/experience/design-system";

export function WorkspaceSwitcher() {
  const { workspaces, workspaceId, setWorkspaceId, isLoading } = useExperienceWorkspace();

  if (isLoading) return <ExperienceSkeleton rows={1} />;

  return (
    <FormField label="فضای کاری">
      <Select
        value={workspaceId ?? ""}
        onChange={(e) => setWorkspaceId(e.target.value)}
        className="min-w-[180px]"
      >
        {workspaces.map((w) => (
          <option key={String(w.id)} value={String(w.id)}>
            {String(w.name ?? w.code)}
          </option>
        ))}
      </Select>
    </FormField>
  );
}