import type { EventInfo } from '../types';
import { EventCardView } from '../event-card.view';
import { EventGridEmpty } from './event-grid.empty';

export function EventGridView({ events, footer }: { events: EventInfo[]; footer: (event: EventInfo) => React.ReactNode }) {
  return (
    <>
      {events.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
          {events.map(event => (
            <EventCardView key={event.eventId} eventInfo={event} actionFooter={footer(event)} />
          ))}
        </div>
      )}
      {events.length === 0 && <EventGridEmpty />}
    </>
  );
}