import { AlertProps, Alert, AlertDetail } from "./Alert";
import AlertTitle from "@mui/material/AlertTitle";
import { getErrorMessage, getErrorDetail } from "api/errors";
import { FC } from "react";

export const ErrorAlert: FC<
  Omit<AlertProps, "severity" | "children"> & { error: unknown }
> = ({ error, ...alertProps }) => {
  const message = getErrorMessage(error, "Something went wrong.");
  const detail = getErrorDetail(error);

  // For some reason, the message and detail can be the same on the BE, but does
  // not make sense in the FE to showing them duplicated
  const shouldDisplayDetail = message !== detail;

  return (
    <Alert severity="error" {...alertProps}>
      {detail ? (
        <>
          <AlertTitle>{message}</AlertTitle>
          {shouldDisplayDetail && <AlertDetail>{detail}</AlertDetail>}
        </>
      ) : (
        message
      )}
    </Alert>
  );
};