import logo from '@/assets/logo.svg'
import { useTranslate } from '@/components/context/YaLocalesProvider'
import styled from '@emotion/styled'

export interface YaEmptyProps {
  height?: number
  desc?: string | React.ReactNode
}

const StyleEmptyContainer = styled('div')<{ height?: number }>(({ height }) => {
  return {
    height,
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    '& > .content': {
      textAlign: 'center',
      '& .image': {
        height: '100px',
        marginBottom: '4px',
        '& > img': {
          height: '100%',
        },
      },
      '& .description': {
        color: '#6563ff',
        fontWeight: 'bold',
        fontSize: '0.675rem',
        userSelect: 'none',
      },
    },
  }
})

const YaEmpty = (props: YaEmptyProps) => {
  const t = useTranslate()
  const { height, desc = t('noData') } = props
  return (
    <StyleEmptyContainer height={height}>
      <div className="content">
        <div className="image">
          <img alt="empty" src={logo} />
        </div>
        <div className="description">{desc}</div>
      </div>
    </StyleEmptyContainer>
  )
}

export default YaEmpty