components/EventList.jsx

import { useEffect, useState } from 'react'
import { format, addDays } from 'date-fns'

export default function EventList({ sport, onSelect }) {
  const [events, setEvents] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchEvents = async () => {
      setLoading(true)
      try {
        const response = await fetch(`/api/events?sport=${sport}`)
        const data = await response.json()
        setEvents(data.events)
      } catch (error) {
        console.error('Error fetching events:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchEvents()
  }, [sport])

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-accent"></div>
      </div>
    )
  }

  // Group events by date
  const groupedEvents = events.reduce((acc, event) => {
    const dateKey = format(new Date(event.date), 'yyyy-MM-dd')
    if (!acc[dateKey]) acc[dateKey] = []
    acc[dateKey].push(event)
    return acc
  }, {})

  return (
    <div className="space-y-6">
      {Object.entries(groupedEvents).map(([dateKey, dayEvents]) => (
        <div key={dateKey}>
          <h3 className="text-lg font-semibold text-gray-400 mb-3">
            {format(new Date(dateKey), 'EEEE, MMMM do')}
          </h3>
          <div className="grid gap-4">
            {dayEvents.map((event) => (
              <button
                key={event.id}
                onClick={() => onSelect(event)}
                className="card hover:border-accent transition-all duration-200 text-left group"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-6">
                    {/* Home Team */}
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-2xl">
                        {event.homeTeam.logo}
                      </div>
                      <div>
                        <p className="font-bold text-white">{event.homeTeam.name}</p>
                        <p className="text-sm text-gray-400">{event.homeTeam.record}</p>
                      </div>
                    </div>

                    {/* VS */}
                    <div className="text-gray-500 font-bold text-lg">VS</div>

                    {/* Away Team */}
                    <div className="flex items-center gap-3">
                      <div className="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center text-2xl">
                        {event.awayTeam.logo}
                      </div>
                      <div>
                        <p className="font-bold text-white">{event.awayTeam.name}</p>
                        <p className="text-sm text-gray-400">{event.awayTeam.record}</p>
                      </div>
                    </div>
                  </div>

                  <div className="flex items-center gap-4">
                    <div className="text-right">
                      <p className="text-sm text-gray-400">{event.time}</p>
                      <p className="text-xs text-gray-500">{event.venue}</p>
                    </div>
                    <svg className="w-6 h-6 text-gray-500 group-hover:text-accent transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}