conference-room-booking-system/frontend/src/components/BookingConfirmation.tsx

/**
 * BookingConfirmation.tsx
 * Displays booking confirmation details for a room reservation.
 * Used in confirmation page after booking is submitted.
 *
 * Author: Cliff Hill
 * Last updated: 2025-09-05
 * @component
 * @param {BookingConfirmationProps} props - Component props
 * @returns {JSX.Element} Confirmation UI
 */

// External imports
import React from "react";
import { Box, Button } from "@mui/material";

// Internal imports

// Type-only imports
import type { BookingConfirmationProps } from "../interfaces";

/**
 * BookingConfirmation component
 * Displays booking confirmation details for a room reservation.
 * Used in confirmation page after booking is submitted.
 * @component
 * @param {BookingConfirmationProps} props - Component props
 * @returns {JSX.Element} Confirmation UI
 */
const BookingConfirmation: React.FC<BookingConfirmationProps> = ({
  booking,
  onEdit,
  onBack,
}) => {
  if (!booking) return null;
  const { room, start_time, end_time, title, invitees } = booking;
  return (
    <Box
      sx={{
        maxWidth: 400,
        margin: "40px auto",
        padding: 4,
        borderRadius: 3,
        boxShadow: 2,
        background: "var(--color-white)",
        textAlign: "center",
      }}
    >
      <h2>Booking Confirmed</h2>
      <Box mb={2}>
        <strong>Room:</strong> {room?.name || "-"}
      </Box>
      <Box mb={2}>
        <strong>Time:</strong> {new Date(start_time).toLocaleString()} –{" "}
        {new Date(end_time).toLocaleString()}
      </Box>
      {title && (
        <Box mb={2}>
          <strong>Title:</strong> {title}
        </Box>
      )}
      {invitees && invitees.length > 0 && (
        <Box mb={2}>
          <strong>Invitees:</strong> {invitees.join(", ")}
        </Box>
      )}
      <Box mt={4} display="flex" justifyContent="center" gap={2}>
        <Button variant="outlined" onClick={onEdit}>
          Edit Booking
        </Button>
        <Button variant="contained" onClick={onBack}>
          Back to Bookings
        </Button>
      </Box>
    </Box>
  );
};

export default BookingConfirmation;