import React from 'react'
import styled, { keyframes } from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Text, Image } from '@pancakeswap/uikit'

interface EmptyProps {
  title?: string
  marginTop?: string
}

const EmptyFlex = styled(Flex)`
  justify-content: center;
  align-items: center;
  flex-direction: column;
`
const EmptyText = styled(Text)`
  font-size: 16px;
  color: #505f79;
  margin-top: 12px;
`

const Empty: React.FC<EmptyProps> = ({ title, marginTop = '20px' }) => {
  const { t } = useTranslation()
  return (
    <EmptyFlex style={{ marginTop }}>
      <Image src="/images/empty.svg" width={228} height={200} />
      <EmptyText>{title ? t(title) : t('No data yet')}</EmptyText>
    </EmptyFlex>
  )
}
export default Empty