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

interface DetailProp {
  beginTime?: string
  coverResource: coverResourceProps
  endTime?: string
  id?: string
  name?: string
  priceList?: priceProps[]
  price?: any
  purchased?: string | number
  total?: string | number
  type?: string
}

interface OperationProp {
  detail: DetailProp
}
// interface listProps {
//   beginTime?: string
//   coverResource: coverResourceProps
//   endTime?: string
//   id?: string
//   name?: string
//   price: priceProps
//   purchased?: string | number
//   total?: string | number
//   type?: string
// }
interface coverResourceProps {
  path?: string
  url?: string
}
interface priceProps {
  label?: string
  value?: string | number
}

const HeaderFlex = styled(Flex)`
  margin-top: 25px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
`
const TextKey = styled(Text)`
  font-size: 22px;
  color: #999999;
`
const TextVal = styled(Text)`
  font-size: 22px;
  color: #1fc7d4;
  margin-left: 10px;
`

const TipFlex = styled(Flex)`
  width: 35px;
  height: 35px;
  background: rgba(237, 231, 246, 0.39);
  border: 1px solid rgba(255, 255, 255, 0.14901960784313725);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #666666;
  margin-right: 20px;
  z-index: 10;
  cursor: pointer;
`

const Header: React.FC<OperationProp> = ({ detail }) => {
  const { t } = useTranslation()
  const [onSeriesDetail] = useModal(<SeriesDetail detail={detail} />)

  return (
    <HeaderFlex>
      <div />
      <Flex>
        <TextKey>{t('time remaining')}</TextKey>
        <TextVal>{t('%hour%hour', { hour: 7 })}</TextVal>
      </Flex>
      <TipFlex onClick={onSeriesDetail}>?</TipFlex>
    </HeaderFlex>
  )
}
export default Header