mimic/frontend/src/components/C2CallbackPicker.tsx

import { extractApiError } from '@/api/client';
import type { C2Callback } from '@/api/types';

interface C2CallbackPickerProps {
  callbacks: C2Callback[];
  isLoading: boolean;
  isError: boolean;
  error: unknown;
  selectedId: number | null;
  onSelect: (id: number) => void;
  rowTestId?: string;
}

export function C2CallbackPicker({
  callbacks,
  isLoading,
  isError,
  error,
  selectedId,
  onSelect,
  rowTestId = 'c2-callback-row',
}: C2CallbackPickerProps): JSX.Element {
  if (isLoading) {
    return <p className="text-[14px] text-graphite">Loading callbacks…</p>;
  }

  if (isError) {
    return (
      <p className="text-[14px] text-bloom-deep">
        Could not load callbacks: {extractApiError(error, 'Unknown error')}
      </p>
    );
  }

  if (callbacks.length === 0) {
    return <p className="text-[14px] text-graphite">No callbacks available.</p>;
  }

  return (
    <div className="border border-hairline overflow-x-auto">
      <table className="w-full text-[14px]">
        <thead>
          <tr className="bg-cloud border-b border-hairline">
            <th className="px-md py-sm text-left font-medium text-ink">Display ID</th>
            <th className="px-md py-sm text-left font-medium text-ink">Active</th>
            <th className="px-md py-sm text-left font-medium text-ink">Host</th>
            <th className="px-md py-sm text-left font-medium text-ink">User</th>
            <th className="px-md py-sm text-left font-medium text-ink">Domain</th>
            <th className="px-md py-sm text-left font-medium text-ink">Last check-in</th>
          </tr>
        </thead>
        <tbody>
          {callbacks.map((cb) => {
            const isSelected = selectedId === cb.display_id;
            return (
              <tr
                key={cb.display_id}
                data-testid={rowTestId}
                onClick={() => onSelect(cb.display_id)}
                className={`cursor-pointer border-b border-hairline ${
                  isSelected ? 'bg-primary-soft' : 'hover:bg-cloud'
                }`}
              >
                <td className="px-md py-sm font-mono">{cb.display_id}</td>
                <td className="px-md py-sm">
                  <span
                    className={`inline-flex items-center rounded-pill px-3 py-[4px] text-[12px] leading-[1.3] font-bold ${
                      cb.active
                        ? 'bg-primary-soft text-primary-deep'
                        : 'bg-cloud text-graphite border border-hairline'
                    }`}
                  >
                    {cb.active ? 'Active' : 'Inactive'}
                  </span>
                </td>
                <td className="px-md py-sm font-mono">{cb.host}</td>
                <td className="px-md py-sm font-mono">{cb.user}</td>
                <td className="px-md py-sm font-mono">{cb.domain}</td>
                <td className="px-md py-sm font-mono">{cb.last_checkin}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}