import React, { useState, useEffect, useMemo, useRef } from 'react'
import dayjs from 'dayjs'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'

interface ListProps {
  title?: string
  publishTime?: number
  content?: string
  close: () => void
}

const DetailDiv = styled.div`
  width: 80%;
  background: rgba(255, 255, 255);
  border-radius: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 30px;
`
const HeaderFlex = styled(Flex)`
  align-items: center;
  cursor: pointer;
`
const TextBack = styled(Text)`
  font-size: 18px;
  color: #1fc7d4;
  margin-left: 10px;
`
const HeadingText = styled(Heading)`
  margin-top: 17px;
  color: #333333;
  font-size: 32px;
`
const TextTime = styled(Text)`
  font-size: 14px;
  color: #999999;
  padding: 30px 0 20px 0;
  border-bottom: 1px solid #e3e3e3;
`
const TextInfo = styled(Text)`
  font-size: 14px;
  color: #999999;
  margin-top: 30px;
`

const Detail: React.FC<ListProps> = ({ title, publishTime, content, close }) => {
  const { t } = useTranslation()
  const closeDetail = () => {
    close()
  }
  return (
    <>
      <DetailDiv>
        <HeaderFlex onClick={closeDetail}>
          <Image src="/images/announcement/goback-icon.svg" alt="" width={12} height={20} />
          <TextBack>{t('return')}</TextBack>
        </HeaderFlex>
        <HeadingText scale="xl">{title}</HeadingText>
        <TextTime>{dayjs(publishTime).format('YYYY-MM-DD HH:mm')}</TextTime>
        <TextInfo>{content}</TextInfo>
      </DetailDiv>
    </>
  )
}
export default Detail