"use client";
import React from "react";
import { useExamBooking } from "../../../../../_hooks/useExamBooking";
import { useTranslation } from "react-i18next";
import { formatToLocal } from "@/_utils/timezone";

// MUI
import Typography from "@mui/material/Typography";

interface ExamDetailsModalProps {
    booking: ReturnType<typeof useExamBooking>;
}

const StepLocation: React.FC<ExamDetailsModalProps> = ({ booking }) => {
    const { t, i18n } = useTranslation("common");

    return (
        <ul className="md:w-1/2 my-5 mx-auto space-x-3 flex justify-center items-start">
            {booking.filteredSessions.length === 0 ? (
                <Typography>{t("booking.stepTimeSlot.noSessions")}</Typography>
            ) : booking.filteredSessions.map((session) => (
                <li
                    key={session.id}
                    className="flex flex-col justify-start items-start"
                    onClick={() => booking.setSelectedSlotId(session.id)}
                >
                    <div
                        className={`border border-[#ddd] ${booking.selectedSlotId === session.id ? "bg-pink-500 text-white font-semibold" : ""
                            } p-[9px] rounded-[4px] cursor-pointer hover:bg-pink-700 hover:text-white`}
                    >
                        {booking.selectedTimezone
                            && `${formatToLocal(session.start_time, booking.selectedTimezone, i18n.language)} - ${formatToLocal(session.end_time, booking.selectedTimezone, i18n.language)}`}
                    </div>
                </li>
            ))}
        </ul>
    );
};

export default StepLocation;