import { Empty } from 'antd';
import type { LLMProvider } from '../../../api';
import ProviderCard from './ProviderCard';

export default function ProviderGrid(props: {
  list: LLMProvider[];
  testingId: string | null;
  onTest: (p: LLMProvider) => void;
  onSetDefault: (p: LLMProvider) => void;
  onEdit: (p: LLMProvider) => void;
  onDelete: (p: LLMProvider) => void;
}) {
  const { list, testingId, onTest, onSetDefault, onEdit, onDelete } = props;

  if (list.length === 0) {
    return (
      <div
        style={{
          borderRadius: 22,
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          padding: '54px 24px'
        }}
      >
        <Empty description="暂无 LLM 提供商，点击右上角添加第一个模型源" />
      </div>
    );
  }

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 18 }}>
      {list.map((p) => (
        <ProviderCard
          key={p.id}
          provider={p}
          testing={testingId === p.id}
          onTest={() => onTest(p)}
          onSetDefault={() => onSetDefault(p)}
          onEdit={() => onEdit(p)}
          onDelete={() => onDelete(p)}
        />
      ))}
    </div>
  );
}

