"use client"import type * as React from "react"import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"import { DayPicker } from "react-day-picker"import { cn } from "@/lib/utils"import { buttonVariants } from "@/app/components/ui/button" // Updated import to your custom buttonVariantsfunction Calendar({className,classNames,showOutsideDays = true,components: userComponents,...props}: React.ComponentProps<typeof DayPicker>) {const defaultClassNames = {months: "relative flex flex-col sm:flex-row gap-4",month: "w-full",month_caption: "relative mx-10 mb-1 flex h-9 items-center justify-center z-20",caption_label: "text-sm font-medium",nav: "absolute top-0 flex w-full justify-between z-10",button_previous: cn(buttonVariants({ variant: "ghost" }), // Using your custom buttonVariants"size-9 text-muted-foreground/80 hover:text-foreground p-0",),button_next: cn(buttonVariants({ variant: "ghost" }), // Using your custom buttonVariants"size-9 text-muted-foreground/80 hover:text-foreground p-0",),weekday: "size-9 p-0 text-xs font-medium text-muted-foreground/80",day_button:"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:opacity-0 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground", // Changed group-data-disabled:text-foreground/30 to group-data-disabled:opacity-0day: "group size-9 px-0 py-px text-sm",range_start: "range-start",range_end: "range-end",range_middle: "range-middle",today:"*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",outside: "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",hidden: "invisible",week_number: "size-9 p-0 text-xs font-medium text-muted-foreground/80",}const mergedClassNames: typeof defaultClassNames = Object.keys(defaultClassNames).reduce((acc, key) => ({...acc,[key]: classNames?.[key as keyof typeof classNames]? cn(defaultClassNames[key as keyof typeof defaultClassNames], classNames[key as keyof typeof classNames]): defaultClassNames[key as keyof typeof defaultClassNames],}),{} as typeof defaultClassNames,)const defaultComponents = {Chevron: (props: {className?: stringsize?: numberdisabled?: booleanorientation?: "left" | "right" | "up" | "down"}) => {if (props.orientation === "left") {return <ChevronLeftIcon size={16} {...props} aria-hidden="true" />}return <ChevronRightIcon size={16} {...props} aria-hidden="true" />},}const mergedComponents = {...defaultComponents,...userComponents,}return (<DayPickershowOutsideDays={showOutsideDays}className={cn("w-fit", className)}classNames={mergedClassNames}components={mergedComponents}{...props}/>)}export { Calendar }"use client"import type * as React from "react"import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"import * as SelectPrimitive from "@radix-ui/react-select"import { cn } from "@/lib/utils"function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {return <SelectPrimitive.Root data-slot="select" {...props} />}function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {return <SelectPrimitive.Group data-slot="select-group" {...props} />}function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {return <SelectPrimitive.Value data-slot="select-value" {...props} />}function SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) {return (<SelectPrimitive.Triggerdata-slot="select-trigger"className={cn("border-input text-foreground data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:line-clamp-1",className,)}{...props}>{children}<SelectPrimitive.Icon asChild><ChevronDownIcon size={16} className="text-muted-foreground/80 in-aria-invalid:text-destructive/80 shrink-0" /></SelectPrimitive.Icon></SelectPrimitive.Trigger>)}function SelectContent({className,children,position = "popper",...props}: React.ComponentProps<typeof SelectPrimitive.Content>) {return (<SelectPrimitive.Portal><SelectPrimitive.Contentdata-slot="select-content"className={cn("border-input bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1","relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-32 overflow-hidden rounded-md border shadow-lg [&_[role=group]]:py-1",position === "popper" &&"w-full min-w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",className,)}position={position}{...props}><SelectScrollUpButton /><SelectPrimitive.ViewportclassName={cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)]")}>{children}</SelectPrimitive.Viewport><SelectScrollDownButton /></SelectPrimitive.Content></SelectPrimitive.Portal>)}function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {return (<SelectPrimitive.Labeldata-slot="select-label"className={cn("text-muted-foreground py-1.5 ps-8 pe-2 text-xs font-medium", className)}{...props}/>)}function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {return (<SelectPrimitive.Itemdata-slot="select-item"className={cn("focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",className,)}{...props}><span className="absolute start-2 flex size-3.5 items-center justify-center"><SelectPrimitive.ItemIndicator><CheckIcon size={16} /></SelectPrimitive.ItemIndicator></span><SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText></SelectPrimitive.Item>)}function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {return (<SelectPrimitive.Separatordata-slot="select-separator"className={cn("bg-border -mx-1 my-1 h-px", className)}{...props}/>)}function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {return (<SelectPrimitive.ScrollUpButtondata-slot="select-scroll-up-button"className={cn("text-muted-foreground/80 flex cursor-default items-center justify-center py-1", className)}{...props}><ChevronUpIcon size={16} /></SelectPrimitive.ScrollUpButton>)}function SelectScrollDownButton({className,...props}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {return (<SelectPrimitive.ScrollDownButtondata-slot="select-scroll-down-button"className={cn("text-muted-foreground/80 flex cursor-default items-center justify-center py-1", className)}{...props}><ChevronDownIcon size={16} /></SelectPrimitive.ScrollDownButton>)}export {Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectScrollDownButton,SelectScrollUpButton,SelectSeparator,SelectTrigger,SelectValue,}"use client"import type React from "react"import { useState, useEffect } from "react"import { XIcon, CalendarIcon as CalendarToday, ChevronDown, ChevronUp } from "lucide-react"import { toast } from "sonner"import dayjs from "dayjs"import utc from "dayjs/plugin/utc"import timezone from "dayjs/plugin/timezone"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"import { Calendar } from "@/components/ui/calendar" // Import shadcn Calendarimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select" // Import shadcn Select componentsimport type { DropdownNavProps, DropdownProps } from "react-day-picker" // For Calendar dropdownsimport Button from "@/app/components/ui/button" // Assuming this is a custom Button componentdayjs.extend(utc)dayjs.extend(timezone)interface AvailableDate {date: string // YYYY-MM-DD formattimeSlots: TimeSlot[]}interface TimeSlot {time: stringlocation: stringmultipleBookings: booleantimezone?: string}interface BookingCalendarProps {isOpen: booleanonClose: () => voidcoachId: stringstudentId: stringstudentEmail: stringonBookingSuccess: () => void}interface ApiErrorResponse {message: string}export default function BookingCalendar({isOpen,onClose,coachId,studentId,onBookingSuccess,}: BookingCalendarProps) {const [availableDates, setAvailableDates] = useState<AvailableDate[]>([])const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined) // Changed to Date | undefinedconst [selectedTimeSlot, setSelectedTimeSlot] = useState<TimeSlot | null>(null)const [timeSlotsForSelectedDate, setTimeSlotsForSelectedDate] = useState<TimeSlot[]>([])const [showForm, setShowForm] = useState(false)const [appointmentDetails, setAppointmentDetails] = useState("")const [isBooking, setIsBooking] = useState(false)const [, setCoachLocations] = useState<string[]>([])const [isLoadingDates, setIsLoadingDates] = useState(true)const [showTimeSlots, setShowTimeSlots] = useState(false) // Declare showTimeSlots variableuseEffect(() => {if (isOpen) {fetchAvailableDates()fetchCoachLocations()// Set initial selected date to today if modal opens and no date is selectedif (!selectedDate) {setSelectedDate(new Date())}} else {setSelectedDate(undefined) // Reset selected datesetSelectedTimeSlot(null)setTimeSlotsForSelectedDate([])setShowForm(false)setAppointmentDetails("")setIsBooking(false)setShowTimeSlots(false) // Reset showTimeSlots when modal closes}}, [isOpen, coachId])// Fetch available datesconst fetchAvailableDates = async () => {setIsLoadingDates(true)try {const response = await fetch(`/api/available-dates?coachId=${coachId}`)const data = await response.json()if (response.ok) {setAvailableDates((data as AvailableDate[]).map((d) => ({...d,// Ensure date is consistently YYYY-MM-DD string for comparisondate: dayjs(d.date).format("YYYY-MM-DD"),})),)} else {toast.error((data as ApiErrorResponse).message || "Failed to load available dates.")}} catch (error) {console.error("Error fetching available dates:", error)toast.error("An error occurred while loading available dates.")} finally {setIsLoadingDates(false)}}const fetchCoachLocations = async () => {try {const response = await fetch(`/api/locations?coachId=${coachId}`)const data = await response.json()if (response.ok) {setCoachLocations(Array.isArray(data.locations) ? data.locations : [])} else {toast.error(data.message || "Failed to load coach locations for display.")}} catch (error) {console.error("Error fetching coach locations:", error)}}const isDateAvailable = (date: Date) => {const formattedDate = dayjs(date).format("YYYY-MM-DD")return availableDates.some((availableDate) => availableDate.date === formattedDate)}// Handle date selection from shadcn Calendarconst handleDateSelection = (date: Date | undefined) => {setSelectedDate(date)setSelectedTimeSlot(null) // Reset time slot when date changessetShowTimeSlots(true) // Always show time slots when a date is selectedif (date) {const formattedDate = dayjs(date).format("YYYY-MM-DD")const selectedAvailableDate = availableDates.find((availableDate) => availableDate.date === formattedDate)if (selectedAvailableDate) {setTimeSlotsForSelectedDate(selectedAvailableDate.timeSlots)} else {setTimeSlotsForSelectedDate([])toast.error("No time slots available for this date.")}} else {setTimeSlotsForSelectedDate([])}}const handleTimeSelect = (timeSlot: TimeSlot) => {setSelectedTimeSlot(timeSlot)}const handleNext = () => {if (!selectedDate || !selectedTimeSlot) {toast.error("Please select a date and time.")return}setShowForm(true)}const goBackToCalendar = () => {setShowForm(false)}const handleSubmit = async (e: React.FormEvent) => {e.preventDefault()if (!selectedDate || !selectedTimeSlot || !studentId || !coachId) {toast.error("Missing booking details. Please try again.")return}setIsBooking(true)try {const formattedDate = dayjs(selectedDate).format("YYYY-MM-DD")const response = await fetch("/api/appointments", {method: "POST",headers: { "Content-Type": "application/json" },body: JSON.stringify({coachId,studentId,selectedDate: formattedDate,selectedTime: selectedTimeSlot.time,isIndividualSession: !selectedTimeSlot.multipleBookings,location: selectedTimeSlot.location,notes: appointmentDetails,timezone: selectedTimeSlot.timezone || "Australia/Sydney",}),})const data = await response.json()if (response.ok) {toast.success("Appointment booked successfully!")onBookingSuccess()onClose()} else {toast.error(data.message || "Failed to book appointment. Please try again.")}} catch (error) {console.error("Error booking appointment:", error)toast.error("An unexpected error occurred. Please try again.")} finally {setIsBooking(false)}}// Calendar dropdown helper function (reused from previous turn)const handleCalendarDropdownChange = (_value: string | number, _e: React.ChangeEventHandler<HTMLSelectElement>) => {const _event = {target: {value: String(_value),},} as React.ChangeEvent<HTMLSelectElement>_e(_event)}if (!isOpen) return nullreturn (<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"><div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden relative">{/* Close Button for the modal */}<buttononClick={onClose}className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 p-2 rounded-full hover:bg-gray-100 z-10"><XIcon className="w-5 h-5" /><span className="sr-only">Close booking calendar</span></button>{!showForm ? (<div className="flex flex-col">{/* Calendar Section */}<div className="md:p-8 p-5 bg-white"><div className="flex justify-center"><Calendarmode="single"selected={selectedDate}onSelect={handleDateSelection}className="rounded-md border p-2"classNames={{month_caption: "mx-0",// Custom styling for available datesday_button:"relative flex size-9 items-center justify-center whitespace-nowrap rounded-md p-0 text-foreground group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 group-data-disabled:pointer-events-none focus-visible:z-10 hover:not-in-data-selected:bg-accent group-data-selected:bg-primary hover:not-in-data-selected:text-foreground group-data-selected:text-primary-foreground group-data-disabled:text-foreground/30 group-data-disabled:line-through group-data-outside:text-foreground/30 group-data-selected:group-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-[.range-middle]:group-data-selected:bg-accent group-[.range-middle]:group-data-selected:text-foreground",}}captionLayout="dropdown"defaultMonth={selectedDate || new Date()}startMonth={new Date(1980, 0)} // Start from Jan 1980hideNavigation // This hides the default ChevronLeft/Right buttonscomponents={{DropdownNav: (props: DropdownNavProps) => {return <div className="flex w-full items-center gap-2">{props.children}</div>},Dropdown: (props: DropdownProps) => {return (<Selectvalue={String(props.value)}onValueChange={(value: string | number) => {if (props.onChange) {handleCalendarDropdownChange(value, props.onChange)}}}><SelectTrigger className="h-8 w-fit font-medium first:grow"><SelectValue /></SelectTrigger><SelectContent className="max-h-[min(26rem,var(--radix-select-content-available-height))]">{props.options?.map((option) => (<SelectItem key={option.value} value={String(option.value)} disabled={option.disabled}>{option.label}</SelectItem>))}</SelectContent></Select>)},}}// Custom day rendering to highlight available datesmodifiers={{available: isDateAvailable,}}modifiersClassNames={{available: "bg-[#037D40] text-white hover:bg-[#025e30]", // Style for available dates}}/></div></div>{/* Time Slots Dropdown Section */}{selectedDate && (<div className="border-t border-gray-200"><buttononClick={() => setShowTimeSlots(!showTimeSlots)}className="w-full px-8 py-4 bg-gray-50 hover:bg-gray-100 transition-colors flex items-center justify-between"><Label className="text-lg font-bold text-gray-900">Available times for {selectedDate.toLocaleDateString()}</Label>{showTimeSlots ? (<ChevronUp className="w-5 h-5 text-gray-600" />) : (<ChevronDown className="w-5 h-5 text-gray-600" />)}</button>{showTimeSlots && (<div className="md:py-6 py-4 md:px-8 px-5 bg-gray-50 border-t border-gray-100"><div className="px-4">{isLoadingDates ? (<div className="flex items-center justify-center py-8"><div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#037D40]"></div></div>) : timeSlotsForSelectedDate.length > 0 ? (<div className="grid grid-cols-2 gap-3">{timeSlotsForSelectedDate.map((slot) => {const id = `${slot.time}-${slot.location || "no-loc"}`.replace(/[^a-zA-Z0-9-]/g, "")return (<div key={id} className="mb-2"><inputtype="radio"id={id}value={slot.time}className="hidden peer"name="timeSlot"checked={selectedTimeSlot?.time === slot.time && selectedTimeSlot?.location === slot.location}onChange={() => handleTimeSelect(slot)}/><LabelhtmlFor={id}className="cursor-pointer block p-4 rounded-lg border border-gray-200 shadow-sm transition-all peer-checked:border-[#037D40] peer-checked:bg-[#037D40] peer-checked:text-white hover:border-[#037D40] hover:shadow"><p className="text-sm font-semibold leading-none peer-checked:text-white">{slot.time}</p><p className="text-sm mt-2 font-medium leading-5">{slot.location || "Online Session"}</p>{slot.multipleBookings && (<div className="mt-2 inline-flex items-center px-2 py-1 rounded-full text-xs bg-gray-100 text-gray-700 peer-checked:bg-green-600 peer-checked:text-white">Group Session</div>)}</Label></div>)})}</div>) : (<div className="bg-white rounded-lg p-8 text-center"><CalendarToday className="w-12 h-12 text-gray-300 mx-auto mb-3" /><p className="text-gray-600">No available time slots for this date.</p></div>)}</div></div>)}</div>)}{/* Action Buttons */}<div className="p-6 bg-white border-t border-gray-100 flex justify-end"><ButtononClick={handleNext}disabled={!selectedDate || !selectedTimeSlot || isLoadingDates}className="px-6 py-2 bg-[#037D40] hover:bg-[#025e30] text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">Next</Button></div></div>) : (<div className="p-6"><form onSubmit={handleSubmit} className="space-y-4"><div className="flex gap-5 pb-3 items-center"><Button type="button" onClick={goBackToCalendar} className="bg-[#037D40] p-4"><CalendarToday className="w-5 h-5" /></Button><h3 className="text-xl font-bold leading-6 text-gray-900">Confirm Booking</h3></div><div className="space-y-2 bg-gray-50 p-4 rounded-lg"><p className="text-gray-700"><span className="font-semibold">Date:</span> {selectedDate?.toLocaleDateString()}</p><p className="text-gray-700"><span className="font-semibold">Time:</span> {selectedTimeSlot?.time}{selectedTimeSlot?.location && ` (${selectedTimeSlot.location})`}</p><p className="text-gray-700"><span className="font-semibold">Session Type:</span>{" "}{selectedTimeSlot?.multipleBookings ? "Group Session" : "Individual Session"}</p></div><div><Label htmlFor="appointmentDetails" className="text-sm font-medium text-gray-700">Appointment Details (Optional)</Label><Inputid="appointmentDetails"type="text"value={appointmentDetails}onChange={(e) => setAppointmentDetails(e.target.value)}placeholder="e.g., specific topics to cover, goals"className="mt-1 focus:ring-[#037D40] focus:border-[#037D40]"/></div><div className="flex justify-between pt-4"><Buttontype="button"onClick={goBackToCalendar}className="px-6 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 border border-gray-300 rounded-lg font-medium transition-colors">Back</Button><Buttontype="submit"disabled={isBooking}className="px-6 py-2 bg-[#037D40] hover:bg-[#025e30] text-white rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">{isBooking ? "Booking..." : "Book Appointment"}</Button></div></form></div>)}</div></div>)}import * as React from "react"import { cn } from "@/lib/utils"function Input({ className, type, ...props }: React.ComponentProps<"input">) {return (<inputtype={type}data-slot="input"className={cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",className)}{...props}/>)}export { Input }"use client"import type React from "react"// Define the props for the buttonVariants functioninterface ButtonVariantsProps {variant?: "primary" | "secondary" | "outline" | "custom" | "ghost"size?: "sm" | "md" | "lg"className?: stringdisabled?: boolean}/*** Generates Tailwind CSS classes for the button based on its variant, size, and state.* This function can be used independently to apply button styles to other elements.* @param {ButtonVariantsProps} props - The properties to determine button styling.* @returns {string} The combined Tailwind CSS class string.*/export function buttonVariants({variant = "primary",size = "md",className = "",disabled = false,}: ButtonVariantsProps): string {const baseClasses ="font-semibold rounded-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2"const hoverEffect = disabled ? "" : "hover:scale-105"const disabledClasses = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"const variantClasses = {primary: "bg-[#037D40] text-white hover:bg-green-700 focus:ring-[#037D40]",secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400",outline: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-300",custom: "", // For custom styling via classNameghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-gray-200",}const sizeClasses = {sm: "px-4 py-2 text-sm",md: "px-6 py-3 text-base",lg: "px-8 py-4 text-lg",}return `${baseClasses} ${hoverEffect} ${disabledClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}// Define the props for the main Button componentinterface ButtonProps extends ButtonVariantsProps {children: React.ReactNodestyle?: React.CSSPropertiesonClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => voidtype?: "button" | "submit" | "reset"href?: string // Add href prop for navigation}/*** A versatile Button component that can render as a button or an anchor link.* It supports different variants, sizes, and states with Tailwind CSS.* @param {ButtonProps} props - The properties for the Button component.* @returns {JSX.Element} The rendered Button or Anchor element.*/export default function Button({children,variant = "primary",size = "md",className = "",style,onClick,disabled,type = "button",href,}: ButtonProps) {// Generate combined classes using the buttonVariants functionconst combinedClasses = buttonVariants({ variant, size, className, disabled })if (href) {// If href is provided, render as an anchor tagreturn (<ahref={href}className={combinedClasses}style={style}onClick={onClick}aria-disabled={disabled} // Use aria-disabled for <a> tags when disabled>{children}</a>)}// Otherwise, render as a regular buttonreturn (<button className={combinedClasses} style={style} onClick={onClick} disabled={disabled} type={type}>{children}</button>)}give me in this calender component i wanna little bit larger like i wanna display numbers properly and button seclt wanna round and calender component when i selected appointment days wanna display properly and other numbes wanna display but like a hide can you understand what i need