'use client';

import React from 'react';
import { Event, TripDataEntry } from '@/types';
import TrainSection from './TrainSection';
import BikeSection from './BikeSection';
import LeaveByBadge from './LeaveByBadge';
import { calculateCountdown } from '@/lib/countdown-utils';

type EventCardProps = {
  event: Event;
  tripData: TripDataEntry;
  className?: string;
};

const EventCard: React.FC<EventCardProps> = ({
  event,
  tripData,
  className = '',
}) => {
  return (
    <div className={
      `bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden ${className}`
    }>
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <h3 className="font-semibold text-gray-900 dark:text-white">{event.title}</h3>
            <p className="text-sm text-gray-600 dark:text-gray-300">{event.destination}</p>
          </div>
          <div className="ml-4 flex items-center">
            <LeaveByBadge countdown={calculateCountdown(event.eventTime)} />
          </div>
        </div>
      </div>
      <div className="p-4">
        <TrainSection
          journeys={tripData.journeys}
          eventTime={event.eventTime}
          destName={event.destination}
          loading={tripData.loading}
        />
        <BikeSection
          bikeRoute={tripData.bikeRoute}
          bikeLoading={tripData.bikeLoading || false}
          bikeError={tripData.bikeError}
        />
      </div>
    </div>
  );
};

export default EventCard;