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

// MUI
// import Calendar from "@/_components/Calendar";

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

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

    return (
        <div className="my-5 mx-auto">
            <CalendarDaySelector
                dates={booking.uniqueDates}
                selectedDate={booking.selectedDate}
                setSelectedDate={(date: string) => {
                    booking.setSelectedDate(date);
                }}
            />

            {booking.selectedDate && (
                <p className="mt-3 text-sm"><span className="font-semibold">{t("booking.stepCalendar.label")}</span> {dateTimeFormatter(booking.selectedDate, 'UTC', i18n.language)}</p>
            )}
        </div>
    );
};

export default StepCalendar;