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

/**
 * RoomDetailsModal.tsx
 * Modal dialog for displaying details about a conference room.
 * Used in booking page for room info popups.
 *
 * Author: Cliff Hill
 * Last updated: 2025-09-05
 */

import React from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
} from "@mui/material";
import type { RoomDetailsModalProps } from "../schemas";

const RoomDetailsModal: React.FC<RoomDetailsModalProps> = ({
  open,
  onClose,
  room,
}) => {
  if (!room) return null;
  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>Room Details</DialogTitle>
      <DialogContent>
        <Box mb={2}>
          <Typography variant="h6">{room.name}</Typography>
          <Typography variant="body2" color="text.secondary">
            Location: {room.location}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Capacity: {room.capacity}
          </Typography>
        </Box>
        <Typography variant="subtitle1" sx={{ mt: 2 }}>
          Equipment
        </Typography>
        <Typography variant="body2">
          {room.equipment || "None listed"}
        </Typography>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Close</Button>
      </DialogActions>
    </Dialog>
  );
};

export default RoomDetailsModal;