import { Box, Link, Typography } from '@mui/material'
import { ErrorOutline } from '@mui/icons-material'
import type { ChatErrorMessageProps } from '../types'
import { styles } from './styles'

export function ChatErrorMessage({
  errors,
  icon,
  actions,
  sx,
}: ChatErrorMessageProps) {
  return (
    <Box sx={{ ...styles.errorMessage, ...sx }}>
      {icon ?? <ErrorOutline fontSize='medium' color='error' />}
      {errors.map((error, index) => (
        <Typography key={index} variant='subtitle2' color='error.relatedDark'>
          {error}
        </Typography>
      ))}
      {actions?.length ? (
        <Box sx={styles.errorActions}>
          {(actions ?? []).map((action, index) => (
            <span key={index}>
              {index > 0 && (
                <Typography
                  component='span'
                  variant='body2'
                  sx={styles.errorActionSeparator}
                >
                  &middot;
                </Typography>
              )}
              <Link
                component='button'
                variant='body2'
                onClick={action.onClick}
                sx={styles.errorAction}
              >
                {action.label}
              </Link>
            </span>
          ))}
        </Box>
      ) : null}
    </Box>
  )
}