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

function DescriptionText({
  descriptionTitle,
  description,
  labelFontColor,
}: any) {
  return (
    <Grid
      templateColumns="repeat(2, 1fr)"
      gap={4}
      px={4}
      pt={{
        base: '6px',
        sm: '8px',
        md: '12px',
      }}
    >
      <Box w="100%" h="100%" display="flex">
        <Text
          paddingTop="4px"
          align="center"
          data-test="description-text-title"
          fontWeight={'semibold'}
          color={'#171717'}
          fontSize={'16px'}
        >
          {descriptionTitle}
        </Text>
      </Box>
      <Box
        w="100%"
        h="100%"
        display="flex"
        justifyContent="end"
        overflow="hidden"
      >
        <Box
          display="flex"
          w="auto"
          h="100%"
          justifyContent="end"
          overflow="hidden"
        >
          <Text
            color={labelFontColor}
            textOverflow="ellipsis"
            whiteSpace="nowrap"
            overflow="hidden"
            borderRadius={4}
            paddingX="8px"
            paddingY="4px"
            textAlign="right"
            align="center"
            data-test="description-text-desc"
            fontSize={'16px'}
          >
            {description}
          </Text>
        </Box>
      </Box>
    </Grid>
  )
}
export default DescriptionText