'use client';
import { SlotCard } from './components/slot-card';
import { DaySlotAddForm } from './day-slot-add-form';
import { LoadingSpinner } from '@/components/common/spinner';
import { useSlots } from '@/hooks/slots';

export function DaySlotsList() {
  const { data, isLoading } = useSlots();
  const slots = data?.data.slots;

  if (isLoading) return <LoadingSpinner />;

  return (
    <div className="flex flex-col space-y-2 px-4">
      <h1 className="font-bold">Слоты</h1>
      {slots?.map((slot) => slot && <SlotCard key={slot.documentId} {...slot} />)}
      <DaySlotAddForm />
    </div>
  );
}