import { Card, Button, Typography, Empty, Tag } from 'antd';
import { CalendarOutlined, TagOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import type { DashboardMyEvent } from './types';

interface MyEventsCardProps {
  events: DashboardMyEvent[];
}

export default function MyEventsCard({ events }: MyEventsCardProps) {
  const navigate = useNavigate();

  return (
    <Card
      styles={{
        header: { borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '12px 20px', minHeight: 'auto' },
        body: { padding: 0 },
      }}
      title={
        <span style={{ fontSize: 14, fontWeight: 600 }}>
          <CalendarOutlined style={{ marginRight: 8 }} />
          My Events
        </span>
      }
    >
      {events.length === 0 ? (
        <div style={{ padding: 24 }}>
          <Empty
            description="You haven't RSVPed to any events yet."
            image={Empty.PRESENTED_IMAGE_SIMPLE}
          />
        </div>
      ) : (
        events.map((event, i) => (
          <div
            key={event.ticketId}
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              padding: '12px 20px',
              borderTop: i > 0 ? '1px solid rgba(255,255,255,0.04)' : undefined,
              gap: 12,
            }}
          >
            <div style={{ flex: 1, minWidth: 0 }}>
              <Typography.Text strong style={{ fontSize: 13, display: 'block' }}>
                {event.eventTitle}
              </Typography.Text>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                  {dayjs(event.eventDate).format('MMM D, YYYY')}
                </Typography.Text>
                {event.tierName && (
                  <Tag icon={<TagOutlined />} color="blue" style={{ margin: 0, fontSize: 11, lineHeight: '18px', padding: '0 6px' }}>
                    {event.tierName}
                  </Tag>
                )}
              </div>
            </div>
            <Button
              size="small"
              type="link"
              onClick={() => navigate(`/event/${event.eventSlug}`)}
              style={{ fontWeight: 600 }}
            >
              Details
            </Button>
          </div>
        ))
      )}
    </Card>
  );
}
