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

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

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

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

    return (
        <>
            <p className=" text-sm">{t("changeRequest.changeTypes.time")}</p>
            <ul className="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)} - ${formatToLocal(session.end_time, booking.selectedTimezone)}`
                                : `${formatToLocal(session.start_time)} - ${formatToLocal(session.end_time)}`}
                        </div>
                    </li>
                ))}
            </ul>
        </>

    );
};

export default StepLocation;