import { useState } from "react";
import { DatePicker } from "../../atoms/DatePicker";

export interface TimingSlotButtonProps {
  label: string;
  onClick?: () => void;
}
const TimingSlotButton = ({ label, onClick }: TimingSlotButtonProps) => {
  return (
    <button
      className="p-2.5 max-w-xs transition transform ease-in duration-100 rounded-lg border border-mono-300 text-mono-600 hover:bg-mono-100 active:bg-mono-200 focus:shadow-none w-full text-sm font-bold"
      onClick={onClick}
    >
      {label}
    </button>
  );
};
export interface MarketPlaceBookingProps {
  datesAvailableForBookings?: string[];
  defaultSelectedDays?: Date[];
  timeSlots?: { id: string; title: string }[];
  onPressTimeSlot: (slot: { id: string; title: string }) => void;
}
const MarketPlaceBooking = ({
  datesAvailableForBookings = [],
  timeSlots = [],
  defaultSelectedDays = [],
  onPressTimeSlot,
}: MarketPlaceBookingProps) => {
  const [selectedDays, setSelectedDays] = useState<Date[] | undefined>(
    defaultSelectedDays
  );
  return (
    <div className="flex items-start py-1.5">
      <div className="px-7.5">
        <DatePicker
          selectedDays={selectedDays}
          onSelectDate={setSelectedDays}
          datesAvailableForBookings={datesAvailableForBookings}
        />
      </div>
      <div className="py-3 px-15 w-full">
        <p className="text-base font-semibold">Thursday, 18 May</p>
        <div className="flex flex-col mt-9 gap-3">
          {timeSlots.map((slot) => (
            <TimingSlotButton
              onClick={() => onPressTimeSlot(slot)}
              key={slot.id}
              label={slot.title}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export { MarketPlaceBooking };
