import React from 'react'
import { Text } from '@pancakeswap/uikit'
import Balance from 'components/Balance'
import styled from 'styled-components'

interface InfoProps {
  title: string
  price: number
}

const HeaderMain = styled.div`
  height: 84px;
  background: linear-gradient(180deg, #c2f9ff 0%, #b596f5 100%);
  box-shadow: 0px 2px 1px #371588;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 16px 0 0 20px;
  text-align: left;
`

const BalanceNum = styled(Balance)`
  font-size: 24px;
  color: #333333;
`

const HeaderText = styled(Text)`
  font-size: 14px;
  color: #666666;
`

const HeaderItem: React.FC<InfoProps> = ({ title, price }) => {
  return (
    <>
      <HeaderMain>
        <BalanceNum lineHeight="1" decimals={0} value={Number(price)} />
        <HeaderText>{title}</HeaderText>
      </HeaderMain>
    </>
  )
}

export default HeaderItem