import React from 'react';
import { TrendingEventsProps } from './types';

/**
 * Trending events section component
 */
export const TrendingEvents: React.FC<TrendingEventsProps> = ({
  events,
  userLocation,
  onEventClick,
  title = "🔥 What's Hot",
  radius = 50
}) => {
  if (events.length === 0) {
    return null;
  }

  return (
    <div className="p-3 md:p-6" style={{ borderTop: '1px solid var(--glass-border)' }}>
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-bold" style={{ color: 'var(--glass-text-primary)' }}>
          {title}
        </h3>
        {userLocation && (
          <span className="text-xs font-medium" style={{ color: 'var(--glass-text-secondary)' }}>
            Within {radius} miles
          </span>
        )}
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {events.slice(0, 4).map(event => (
          <div
            key={event.eventId}
            onClick={() => onEventClick?.(event)}
            className="flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all hover:scale-105 backdrop-blur-sm"
            style={{ 
              background: 'var(--warning-bg)',
              border: '1px solid var(--warning-border)'
            }}
          >
            <div className="flex-1 min-w-0">
              <div className="flex items-center space-x-2">
                <div className="text-sm font-bold truncate" style={{ color: 'var(--glass-text-primary)' }}>
                  {event.title}
                </div>
                {event.isFeature && (
                  <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-bold" 
                        style={{ background: 'var(--warning-color)', color: 'var(--glass-text-primary)' }}>
                    ⭐
                  </span>
                )}
              </div>
              <div className="text-xs mt-1" style={{ color: 'var(--glass-text-secondary)' }}>
                {event.venue}
                {event.distanceMiles && (
                  <span className="ml-2">• {event.distanceMiles.toFixed(1)} mi</span>
                )}
              </div>
              <div className="text-xs font-semibold mt-1" style={{ color: 'var(--warning-color)' }}>
                {event.ticketsSold || 0} tickets sold
              </div>
            </div>
            <div className="text-xs text-right ml-2" style={{ color: 'var(--glass-text-tertiary)' }}>
              {new Date(event.startTime).toLocaleDateString('en-US', { 
                month: 'short', 
                day: 'numeric'
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};