import { Empty, Spin } from 'antd';
import type { PromptTemplate } from '../../../api';
import PromptTemplateCard from './PromptTemplateCard';

export default function PromptTemplateGrid(props: {
  loading: boolean;
  list: PromptTemplate[];
  hasOnSelect: boolean;
  onUse: (t: PromptTemplate) => void;
  onEdit: (t: PromptTemplate) => void;
  onDelete: (t: PromptTemplate) => void;
  formatDate: (ts: number) => string;
}) {
  const { loading, list, hasOnSelect, onUse, onEdit, onDelete, formatDate } = props;

  if (loading) {
    return (
      <div
        style={{
          minHeight: 280,
          borderRadius: 22,
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <Spin size="large" />
      </div>
    );
  }

  if (list.length === 0) {
    return (
      <div style={{ borderRadius: 22, background: 'var(--color-surface)', border: '1px solid var(--color-border)', padding: '54px 24px' }}>
        <Empty description="还没有找到合适的模板，试试换个关键词或新建一个灵感卡片" />
      </div>
    );
  }

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))', gap: 18 }}>
      {list.map((t) => (
        <PromptTemplateCard
          key={t.id}
          template={t}
          hasOnSelect={hasOnSelect}
          onUse={() => onUse(t)}
          onEdit={() => onEdit(t)}
          onDelete={() => onDelete(t)}
          formatDate={formatDate}
        />
      ))}
    </div>
  );
}

