frontend/src/components/common/ErrorDisplay.jsx

import React from "react";
import { Box, Typography } from "@mui/material";
import SentimentVeryDissatisfiedIcon from "@mui/icons-material/SentimentVeryDissatisfied";

/**
 * Generic error display component with centered icon and text
 * @param {Object} props
 * @param {string} props.error - The error message to display
 * @param {string} [props.title="Error"] - Optional custom title
 * @param {Object} [props.sx={}] - Optional additional styles
 */
const ErrorDisplay = ({ error, title = "Error", sx = {} }) => {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        p: 4,
        gap: 2,
        ...sx,
      }}
    >
      <SentimentVeryDissatisfiedIcon
        sx={{ fontSize: 60, color: "warning.main" }}
      />
      <Typography variant="h6" color="warning">
        {title}
      </Typography>
      <Typography
        variant="body1"
        align="center"
        color="text.secondary"
        sx={{ maxWidth: "80%", lineHeight: 1.5 }}
      >
        {error}
      </Typography>
    </Box>
  );
};

export default ErrorDisplay;