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

/**
 * RoomDetailsModal component
 * Modal dialog for displaying details about a conference room.
 * Used in booking page for room info popups.
 * @component
 * @param {RoomDetailsModalProps} props - Component props
 * @returns {JSX.Element} Room details modal UI
 */

// Utility/helper imports

// External imports
import React from "react";

// MUI imports
import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Typography,
} from "@mui/material";

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

const RoomDetailsModal: React.FC<RoomDetailsModalProps> = ({
  open,
  onClose,
  room,
}) => {
  // Lifecycle and debug logging removed
  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;