/**
 * @format
 */

import {Text, Box, HStack} from '@chakra-ui/react'
import React from 'react'

interface InfoContentType {
  pricePSF: string
  date: string
  transactionPrice: string
  address: string
}

export const InfoContent = ({infoData}: {infoData: InfoContentType}) => {
  const {date, address, transactionPrice, pricePSF} = infoData

  return (
    <Box px="12px" pt="18px">
      <Text mb="8px">{date}</Text>
      <Text mb="8px">{address}</Text>
      <HStack justify="space-between">
        <Box>
          <Text>Price PSF</Text>
          <Text variant="bold">{pricePSF}</Text>
        </Box>
        <Box>
          <Text>Transaction Price</Text>
          <Text variant="bold">{transactionPrice}</Text>
        </Box>
      </HStack>
    </Box>
  )
}