import React from 'react'
import { FaCalendarAlt } from 'react-icons/fa'
import dayjs from 'dayjs'
import { EventDto } from '@/proxy/intranet/models'
import useLocale from '@/utils/hooks/useLocale'
import { currentLocalDate } from '@/utils/dateUtils'
import { useLocalization } from '@/utils/hooks/useLocalization'

const UpcomingEvents: React.FC<{ events: EventDto[] }> = ({ events }) => {
  const currentLocale = useLocale()
  const { translate } = useLocalization();
  
  const upcomingEvents = events.filter(
    (event) =>
      event.isPublished &&
      dayjs(event.date).isAfter(dayjs()) &&
      dayjs(event.date).isBefore(dayjs().add(7, 'day')),
  )

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <FaCalendarAlt className="w-5 h-5" />
          {translate('::App.Platform.Intranet.Widgets.UpcomingEvents.Title')}
        </h2>
      </div>
      <div className="p-4 space-y-3">
        {upcomingEvents.length > 0 ? (
          upcomingEvents.slice(0, 3).map((event) => (
            <div
              key={event.id}
              className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-700/50 border-l-green-500"
            >
              <h4 className="text-sm font-medium text-gray-900 dark:text-white">{event.name}</h4>
              <p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
                {currentLocalDate(event.date, currentLocale || 'tr')} - {event.place}
              </p>
            </div>
          ))
        ) : (
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
            {translate('::App.Platform.Intranet.Widgets.UpcomingEvents.NoEvent')}
          </p>
        )}
      </div>
    </div>
  )
}

export default UpcomingEvents