import { useEffect, useState } from 'react';
import { api } from '../api';

interface Props {
  org: string | undefined;
  setOrg: (org: string | undefined) => void;
}

export function OrgSwitcher({ org, setOrg }: Props) {
  const [orgs, setOrgs] = useState<string[]>([]);

  useEffect(() => {
    api.orgs().then(setOrgs).catch(() => {});
  }, []);

  if (orgs.length === 0) return null;

  return (
    <select
      value={org || ''}
      onChange={(e) => setOrg(e.target.value || undefined)}
      className="bg-surface-overlay border border-border rounded px-2 py-1 text-xs text-text-secondary focus:outline-none focus:border-accent"
    >
      <option value="">All orgs</option>
      {orgs.map((o) => (
        <option key={o} value={o}>{o}</option>
      ))}
    </select>
  );
}
