import { Card, Table, Tag } from 'antd';
import dayjs from 'dayjs';
import type { AlertInfo } from '@/types/api';

interface AlertsTableProps {
  alerts: AlertInfo[];
  loading: boolean;
}

export function AlertsTable({ alerts, loading }: AlertsTableProps) {
  const columns = [
    {
      title: 'Severity',
      dataIndex: 'severity',
      key: 'severity',
      width: 100,
      render: (severity: string) => {
        const colorMap: Record<string, string> = {
          critical: 'red',
          warning: 'orange',
          info: 'blue',
        };
        return <Tag color={colorMap[severity] || 'default'}>{severity.toUpperCase()}</Tag>;
      },
    },
    {
      title: 'Alert',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: 'Summary',
      dataIndex: 'summary',
      key: 'summary',
      ellipsis: true,
    },
    {
      title: 'Started',
      dataIndex: 'startsAt',
      key: 'startsAt',
      width: 180,
      render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
    },
  ];

  return (
    <Card title={`Active Alerts (${alerts.length})`} style={{ marginBottom: 16 }}>
      <Table
        dataSource={alerts}
        columns={columns}
        loading={loading}
        rowKey="id"
        pagination={false}
        size="small"
      />
    </Card>
  );
}
