"use client";

import { SlotDay } from "@/types/participant-list/provisional-types";
import SlotCard from "@/components/pages/client/participant-list/overview/partials/slot-card";
import { useTimezone } from "@/components/pages/client/participant-list/common/timezone-context";
import {
  formatSlotDayName,
  formatSlotDate,
} from "@/components/pages/client/participant-list/common/format-session-time";

type DayColumnProps = {
  day: SlotDay;
  onSlotClick?: (sessionId: string) => void;
};

function DayColumn({ day, onSlotClick }: DayColumnProps) {
  const { timezone } = useTimezone();

  return (
    <div
      className={`min-w-[90px] flex-1 px-4 py-3 ${
        day.isToday ? "bg-midnightBlue/5" : ""
      }`}
    >
      <p
        className={`text-[10px] font-semibold uppercase tracking-wider ${
          day.isToday ? "text-midnightBlue" : "text-gray-400 dark:text-gray-300"
        }`}
      >
        {formatSlotDayName(day.date, timezone)}
      </p>
      <p
        className={`text-lg font-bold ${
          day.isToday ? "text-midnightBlue" : "text-gray-900 dark:text-white"
        }`}
      >
        {formatSlotDate(day.date, timezone)}
      </p>

      {day.slots.length === 0 ? (
        <p className="mt-3 text-xs text-gray-400 dark:text-gray-300">
          No slots
        </p>
      ) : (
        <div className="mt-3 space-y-2">
          {day.slots.map((slot) => (
            <SlotCard
              key={slot.sessionId}
              slot={slot}
              onClick={onSlotClick}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default DayColumn;