"use client";
import React from "react";
import { useExamBooking } from "../../../../../_hooks/useExamBooking";
import TimezoneDropdown from "@/_components/TimeZoneDropdown";
import { useTranslation } from "react-i18next";

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

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

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

    return (
        <><ul className="md:w-1/2 my-5 mx-auto space-y-2 mb-4">
            {booking.uniqueLocations.length === 0 ? (
                <Typography>{t("booking.stepLocation.noSessions")}</Typography>
            ) : booking.uniqueLocations.map((loc: { key: string; name: string }) => (
                <li key={loc.key}>
                    <div
                        className={`cursor-pointer p-[9px] rounded-[4px] border border-[#ddd] hover:bg-pink-700 hover:text-white ${booking.selectedLocationKey === loc.key ? "bg-pink-500 text-white font-semibold" : ""
                            }`}
                        onClick={() => {
                            booking.setSelectedLocationKey(loc.key)
                        }}
                    >
                        {loc.name}
                    </div>
                </li>
            ))}
        </ul>
            {booking.selectedLocationKey === "online" && (
                <TimezoneDropdown selectedTimezone={booking.selectedTimezone} setSelectedTimezone={booking.setSelectedTimezone} />
            )}
        </>
    );
};

export default StepLocation;