import { Link } from "react-router-dom";
import { Button } from "@edr/ui-common";

import BookingTable from "../../components/bookings/BookingTable";
import { useBookings } from "../../hooks/useBookings";

const BookingsPage = () => {
  const { data, isLoading } = useBookings();
  const items = data?.items ?? [];

  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-gray-900">Bookings</h1>
        <Link to="/bookings/new">
          <Button>New booking</Button>
        </Link>
      </div>
      {isLoading ? (
        <div className="text-sm text-gray-500">Loading…</div>
      ) : (
        <BookingTable bookings={items} />
      )}
    </div>
  );
};

export default BookingsPage;
