import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";

import BookingForm from "../../components/bookings/BookingForm";
import { bookingsService } from "../../services/bookings.service";

const CreateBookingPage = () => {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: bookingsService.create,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["bookings"] });
      navigate("/bookings");
    },
  });

  return (
    <div className="max-w-lg">
      <h1 className="mb-4 text-2xl font-semibold text-gray-900">New booking</h1>
      <BookingForm
        onSubmit={mutation.mutate}
        isSubmitting={mutation.isPending}
      />
    </div>
  );
};

export default CreateBookingPage;
