import { Calendar, Clock } from 'lucide-react';

import type { DashboardContentState } from '@/business/dashboard/types';
import { COMMUNICATION_EVENT_TYPE_COLORS } from '@/shared/constants/communications';
import type { CommunicationEventDto } from '@/shared/types/communications';

interface DashboardUpcomingEventsProps {
  readonly events: readonly CommunicationEventDto[];
  readonly state: DashboardContentState;
}

export function DashboardUpcomingEvents({
  events,
  state,
}: DashboardUpcomingEventsProps) {
  return (
    <section className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
        <Calendar size={18} className="text-violet-400" />
        Upcoming Events
      </h3>
      <div className="space-y-2.5">
        {state.isLoading ? (
          <div className="flex items-center justify-center py-6">
            <Clock size={18} className="animate-pulse text-violet-400" />
          </div>
        ) : state.isError ? (
          <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3">
            <p className="text-xs text-red-300">Events could not be loaded.</p>
          </div>
        ) : events.length > 0 ? (
          events.map((event) => (
            <div
              key={event.id}
              className="flex items-center gap-3 p-2.5 rounded-xl bg-slate-700/30 hover:bg-slate-700/50 transition-colors border border-slate-700/30"
            >
              <span className={`text-[10px] font-semibold px-2 py-1 rounded-lg border ${COMMUNICATION_EVENT_TYPE_COLORS[event.type]}`}>
                {event.type.toUpperCase()}
              </span>
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium text-slate-200 truncate">{event.title}</p>
                <p className="text-[10px] text-slate-500">
                  {new Date(event.date).toLocaleDateString('en-US', {
                    weekday: 'short',
                    month: 'short',
                    day: 'numeric',
                  })}
                </p>
              </div>
            </div>
          ))
        ) : (
          <div className="rounded-xl border border-slate-700/40 bg-slate-700/20 p-3">
            <p className="text-xs text-slate-400">No upcoming events are posted yet.</p>
          </div>
        )}
      </div>
    </section>
  );
}
