"use client";
import { Card, CardContent } from "@mui/material";
import { useTranslation } from "react-i18next";

const CalendarDaySelector = ({ dates, setSelectedDate, selectedDate }: { dates: { label: string; value: string; weekday: string; day: string; month: string; }[]; setSelectedDate: (date: string) => void; selectedDate: string | null }) => {
  const { t } = useTranslation("common");

  if (!dates?.length)
    return <p className="text-gray-500">{t("booking.noAvailableDates")}</p>;

  return (
    <div className="my-5">
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
        {dates.map((date) => (
          <Card
            key={date.value}
            onClick={() => setSelectedDate(date.value)}
            className={`cursor-pointer transition-all hover:shadow-lg ${selectedDate === date.value
                ? "border-2 border-pink-500 shadow-md"
                : "border border-gray-200"
              }`}
          >
            <CardContent className="text-center font-medium">
              <div className="text-sm font-medium uppercase">{date.weekday}</div>
              <div className="text-3xl font-bold leading-none">{date.day}</div>
              <div className="text-sm">{date.month}</div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

export default CalendarDaySelector;