import { Button, Typography } from 'antd';
import { CalendarOutlined, EnvironmentOutlined, RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import type { DashboardFeaturedEvent } from './types';

interface TakeActionCardProps {
  event: DashboardFeaturedEvent;
}

export default function TakeActionCard({ event }: TakeActionCardProps) {
  const navigate = useNavigate();

  return (
    <div
      style={{
        borderRadius: 8,
        overflow: 'hidden',
        background: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 60%, #a93226 100%)',
        position: 'relative',
      }}
    >
      <div style={{ padding: '12px 20px', borderBottom: '1px solid rgba(255,255,255,0.15)' }}>
        <Typography.Text strong style={{ color: '#fff', fontSize: 14, letterSpacing: 0.5, textTransform: 'uppercase' }}>
          Take Action
        </Typography.Text>
      </div>
      <div style={{ padding: '20px 20px 24px' }}>
        <Typography.Title level={4} style={{ color: '#fff', margin: '0 0 12px', lineHeight: 1.3 }}>
          {event.title}
        </Typography.Title>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 20 }}>
          <Typography.Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 13 }}>
            <CalendarOutlined style={{ marginRight: 6 }} />
            {dayjs(event.date).format('ddd, MMM D, YYYY')} at {event.startTime}
          </Typography.Text>
          {event.venueName && (
            <Typography.Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 13 }}>
              <EnvironmentOutlined style={{ marginRight: 6 }} />
              {event.venueName}
            </Typography.Text>
          )}
        </div>
        <Button
          type="default"
          size="large"
          icon={<RightOutlined />}
          onClick={() => navigate(`/event/${event.slug}`)}
          style={{
            background: '#fff',
            color: '#c0392b',
            fontWeight: 600,
            border: 'none',
            boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
          }}
        >
          Take Action
        </Button>
      </div>
    </div>
  );
}
