import { useParams } from "react-router-dom";

import { useBooking } from "../../hooks/useBookings";

const BookingDetailPage = () => {
  const { id } = useParams<{ id: string }>();
  const { data: booking, isLoading } = useBooking(id ?? "");

  if (isLoading) return <div className="text-sm text-gray-500">Loading…</div>;
  if (!booking)
    return <div className="text-sm text-red-600">Booking not found.</div>;

  return (
    <div className="flex flex-col gap-3">
      <h1 className="text-2xl font-semibold text-gray-900">
        Booking {booking.reference}
      </h1>
      <dl className="grid grid-cols-2 gap-2 text-sm">
        <dt className="text-gray-500">Status</dt>
        <dd className="text-gray-900">{booking.status}</dd>
        <dt className="text-gray-500">Customer ID</dt>
        <dd className="text-gray-900">{booking.customerId}</dd>
        <dt className="text-gray-500">Scheduled</dt>
        <dd className="text-gray-900">
          {new Date(booking.scheduledDate).toLocaleString()}
        </dd>
        <dt className="text-gray-500">Total amount</dt>
        <dd className="text-gray-900">{booking.totalAmount.toFixed(2)}</dd>
      </dl>
    </div>
  );
};

export default BookingDetailPage;
