import { Box, Typography, styled } from '@mui/material'
import { ReactNode } from 'react'
import Image from './Image'

interface Props {
  imageSrc: string
  height?: string
  message?: string | ReactNode
}

export default function NoData({
  imageSrc,
  height = '300px',
  message = 'No Data Found',
}: Props) {
  return (
    <Box
      sx={{
        marginTop: '20px',
      }}
    >
      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
      {typeof message === 'string' ? (
        <StyledTypography variant="h6">{message}</StyledTypography>
      ) : (
        <>{message}</>
      )}
    </Box>
  )
}
export const StyledTypography = styled(Typography)(({ theme }) => ({
  opacity: '0.5',
  marginTop: '20px',
  textAlign: 'center',
}))
