import { Alert, AlertTitle, Box } from "@mui/material";
import compact from "lodash/compact";
import { useTranslation } from "react-i18next";

interface Props {
  errors: (string | undefined)[];
}

const ErrorAlert: React.FC<Props> = ({ errors }) => {
  const { t } = useTranslation("common");

  if (compact(errors).length === 0) return null;

  return (
    <Alert severity="error">
      <AlertTitle>{t("There are some errors")}</AlertTitle>
      <Box component="ul">
        {errors.map((error, index) => (
          <Box component="li" key={`${error}-${index}`}>
            {error}
          </Box>
        ))}
      </Box>
    </Alert>
  );
};

export default ErrorAlert;
