'use client';

import React from 'react';

import { Calendar } from '@kit/ui/shadcn/calendar';
import { Card } from '@kit/ui/shadcn/card';

import { ServiceCategory } from '../service-categories';
import { BookingProvider } from './booking.provider';
import LocationSelector from './location-selector';
import ServiceSelector from './service-selector';
import TimeSlots from './time-slots';

const BookingContainer = ({ category }: { category: ServiceCategory }) => {
  return (
    <BookingProvider category={category}>
      <div className="flex flex-row gap-6">
        <div className="flex flex-col">
          <ServiceSelector products={category.products} />
          <Card className="mb-4">
            <Calendar />
          </Card>
          {/* <LocationSelector /> */}
        </div>
        <TimeSlots />
      </div>
    </BookingProvider>
  );
};

export default BookingContainer;