import { Box, Flex, FlexProps, HoverCard, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

interface HeadLabelProps {
  className?: string
  label: string
  description?: React.ReactNode
}

export const HeadLabel: React.FC<HeadLabelProps> = ({ className, label, description }) => {
  return (
    <Box className={className}>
      <Typography variant="title-lg">{label}</Typography>
      <Typography variant="body-lg" c="carbon.7" mt={4}>
        {description}
      </Typography>
    </Box>
  )
}

export const StarterTips: React.FC<React.PropsWithChildren<FlexProps>> = ({ children, ...rest }) => {
  return (
    <Flex align="center" {...rest}>
      {children}
      <HoverCard shadow="md" withArrow width={400}>
        <HoverCard.Target>
          <IconInfoCircle size={14} ml={4} style={{ cursor: 'pointer' }} />
        </HoverCard.Target>
        <HoverCard.Dropdown>
          <Typography variant="body-lg">
            The Starter plan was previously called the Serverless plan. Only the name has changed—pricing and features
            remain the same.{' '}
            <a
              href="https://www.pingcap.com/blog/introducing-tidb-cloud-starter-auto-scaling-plan-renamed/"
              target="_blank"
              rel="noreferrer"
            >
              Learn more about our release notice.
            </a>
          </Typography>
        </HoverCard.Dropdown>
      </HoverCard>
    </Flex>
  )
}

export const TimezoneTips = () => {
  return (
    <HoverCard shadow="md" withArrow width={400}>
      <HoverCard.Target>
        <IconInfoCircle size={14} style={{ cursor: 'pointer' }} />
      </HoverCard.Target>
      <HoverCard.Dropdown>
        <b>Billing Cycle & Timezone Standard:</b> <br />
        Please note that all billing periods, billed dates, and invoices are calculated based on the global{' '}
        <b>(UTC±00:00)</b> standard. This is independent of Organization timezone settings.
      </HoverCard.Dropdown>
    </HoverCard>
  )
}