import { Box, Group, HoverCard, Stack, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

interface DiscountInfoProps {
  originalPrice: number
}

export const DiscountInfo = ({ originalPrice }: DiscountInfoProps) => {
  return (
    <Stack gap={8}>
      <Group gap={6}>
        <Typography variant="body-lg" c="carbon.8" sx={{ textDecoration: 'line-through' }}>
          Standard&nbsp;
          <Box component="b" fw={700} fz={16}>
            ${originalPrice}
          </Box>
          &nbsp;/hour
        </Typography>
        <HoverCard>
          <HoverCard.Target>
            <IconInfoCircle size={14} c="carbon.8" />
          </HoverCard.Target>
          <HoverCard.Dropdown w={320}>
            TiProxy is currently available at a special discounted price for a limited time. This promotional offer is
            valid until general availability (GA).
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </Stack>
  )
}