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

const TimeText = styled(Text)`
  color: #7a6eaa;
  font-size: 18px;
`
const TimeFlex = styled(Flex)`
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  ${({ theme }) => theme.mediaQueries.xs} {
    flex-direction: column;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    flex-direction: row;
  }
`

interface RoundDetailProps {
  beginTime?: number
  endTime?: number
  price?: number
  remaining?: number
  token?: string
  total?: number
}
interface HeaderStatusProps {
  status?: string
  roundDetail?: RoundDetailProps
}

const HeaderStatus: React.FC<HeaderStatusProps> = ({ status, roundDetail }) => {
  const { t } = useTranslation()

  return (
    <TimeText>
      {/* {status === 'close' && t('Exchange closed')} */}
      {status === 'none' && t('Exchange not commenced')}

      {status === 'proceed' && (
        <TimeFlex>
          {dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}
          <Text> ~ </Text>
          {dayjs(roundDetail?.endTime).format('YYYY-MM-DD HH:mm:ss')}
        </TimeFlex>
      )}

      {status === 'end' &&
        `${t('Opening time of next exchange period:')}${dayjs(roundDetail?.beginTime).format('YYYY-MM-DD HH:mm:ss')}`}
    </TimeText>
  )
}

export default HeaderStatus