import { Box } from '@mui/material';

import { styled } from '../Theme';

export interface ResultProps {
  icon?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  extra?: React.ReactNode;
}

function Result({ icon = null, title = '', description = '', extra = null, ...rest }: ResultProps) {
  return (
    <Root {...rest}>
      {icon}
      {typeof title === 'string' ? (
        <Box
          sx={{
            mt: 3,
            fontSize: 22,
            fontWeight: 400,
            color: 'text.primary',
            textAlign: 'center',
          }}>
          {title}
        </Box>
      ) : (
        title
      )}
      {typeof description === 'string' ? (
        <Box
          sx={{
            mt: 1,
            fontSize: 14,
            color: 'text.secondary',
            textAlign: 'center',
          }}>
          {description}
        </Box>
      ) : (
        description
      )}
      <Box
        sx={{
          mt: 3,
        }}>
        {extra}
      </Box>
    </Root>
  );
}

const Root = styled('div')`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 16px;

  background-color: ${({ theme }) => theme.palette?.background?.default || '#F7F8F8'};
`;

export default Result;
