import { Alert as MuiAlert, styled } from '@mui/material'
import _ from 'lodash'
import { ReactNode } from 'react'

export default function ErrorBox({
  err,
  extra,
}: {
  err: any
  extra?: string | ReactNode
}) {
  if (!err) {
    return null
  }

  if (err.response) {
    if (err.response.status == 401) {
      return (
        <Alert severity={'error'}>
          {_.get(err, 'response.data.message', 'Server error!')} {extra}
        </Alert>
      )
    }
    if (err.response.status == 422) {
      return (
        <Alert severity={'error'}>
          {_.get(err, 'response.data.message', 'Server error!')} {extra}
        </Alert>
      )
    }

    return (
      <Alert severity={'error'}>
        {'Unknown Error'} {extra}
      </Alert>
    )
  }
}

const Alert = styled(MuiAlert)(({}) => ({
  marginTop: '20px',
}))
