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

interface InfoProps {
  title?: string
  content?: string
  publishTime?: string
  top?: boolean
}

const FlexTable = styled(Flex)`
  padding: 25px 0 20px 0;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #e3e3e3;
`
const TableInfo = styled.div`
  width: 70%;
`
const FlexTitle = styled(Flex)`
  font-size: 18px;
  color: #333333;
  align-items: center;
  ${({ theme }) => theme.mediaQueries.xs} {
    font-size: 14px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    font-size: 18px;
  }
`
const TextTitle = styled(Text)`
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #333333;
  ${({ theme }) => theme.mediaQueries.xs} {
    max-width: 100px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    max-width: 747px;
  }
`
const TextInfo = styled(Text)`
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: #666666;
  margin-top: 10px;
  ${({ theme }) => theme.mediaQueries.xs} {
    font-size: 12px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    font-size: 14px;
  }
`
const TextTime = styled(Text)`
  font-size: 18px;
  color: #999999;
  ${({ theme }) => theme.mediaQueries.xs} {
    font-size: 14px;
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    font-size: 18px;
  }
`
const TextTop = styled(Flex)`
  margin-left: 10px;
  width: 50px;
  height: 25px;
  align-items: center;
  justify-content: center;
  background: #eff4f5;
  opacity: 0.75;
  border-radius: 15px;
  font-size: 12px;
  color: #1fc7d4;
`

const ListItem: React.FC<InfoProps> = ({ title, content, publishTime, top = false }) => {
  const { t } = useTranslation()
  return (
    <>
      <FlexTable>
        <TableInfo>
          <FlexTitle>
            <TextTitle>{title}</TextTitle>
            {top ? <TextTop>{t('top')}</TextTop> : ''}
          </FlexTitle>
          <TextInfo>{content}</TextInfo>
        </TableInfo>
        <TextTime color="textSubtle">{publishTime?.split(' ')[0]}</TextTime>
      </FlexTable>
    </>
  )
}
export default ListItem