import React from 'react';
import { Event } from './types';
import { getFutureEvents, sortEventsByDate } from './utils';

interface UpcomingEventsProps {
  events: Event[];
  onEventClick?: (event: Event) => void;
  limit?: number;
  showIfEmpty?: boolean;
}

/**
 * Upcoming events section component
 */
export const UpcomingEvents: React.FC<UpcomingEventsProps> = ({
  events,
  onEventClick,
  limit = 5,
  showIfEmpty = true
}) => {
  const futureEvents = getFutureEvents(events);
  const sortedEvents = sortEventsByDate(futureEvents).slice(0, limit);

  return (
    <div className="p-3 md:p-6" style={{ borderTop: '1px solid var(--glass-border)' }}>
      <h3 className="text-sm font-bold mb-3" style={{ color: 'var(--glass-text-primary)' }}>
        Upcoming Events
      </h3>
      
      <div className="space-y-2">
        {sortedEvents.map(event => {
          const eventDate = new Date(event.start_time);
          return (
            <div
              key={event.id}
              onClick={() => onEventClick?.(event)}
              className="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all hover:scale-105 backdrop-blur-sm"
              style={{ 
                background: 'var(--glass-bg)',
                border: '1px solid var(--glass-border)'
              }}
            >
              <div className="flex-1 min-w-0">
                <div className="text-sm font-bold truncate" style={{ color: 'var(--glass-text-primary)' }}>
                  {event.title}
                </div>
                <div className="text-xs font-medium truncate" style={{ color: 'var(--glass-text-secondary)' }}>
                  {event.venue}
                </div>
              </div>
              <div className="text-xs text-right ml-2" style={{ color: 'var(--glass-text-tertiary)' }}>
                {eventDate.toLocaleDateString('en-US', { 
                  month: 'short', 
                  day: 'numeric',
                  hour: 'numeric',
                  minute: '2-digit'
                })}
              </div>
            </div>
          );
        })}
        
        {sortedEvents.length === 0 && showIfEmpty && (
          <div className="text-sm font-medium text-center py-4" style={{ color: 'var(--glass-text-secondary)' }}>
            No upcoming events
          </div>
        )}
      </div>
    </div>
  );
};