import { Calendar } from "@/components/ui/calendar"
import React from 'react'



const TimeDateSelection = ({date, handleDatechange, timeSlots, setSelectedTime, unavialableTime, selectedTime, booking}) => {
  const checkTimeSlot = (time) => {
    return (booking.filter(item => item.selectedTime == time)).length > 0
  }

  
  return (
    <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
        <div className="flex flex-col">
            <p className="font-semibold mt-5 lg:mt-0">Select your meeting date & time</p>
            <Calendar disabled={(date) => date <= new Date()} mode="single" selected={date} onSelect={(d) => handleDatechange(d)} className="rounded-md border mt-5"/>
        </div>
        <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
            {timeSlots?.map((time, index) => (
                <button key={index} disabled={!unavialableTime || checkTimeSlot(time)} onClick={() => setSelectedTime(time)} className={`text-xs p-2 border rounded-md hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-200 ${time == selectedTime && 'bg-gray-200'}`}>{time}</button>
            ))}
        </div>
    </div>
  )
}

export default TimeDateSelection