import { Box, BoxProps, Divider, Flex, Typography } from '@tidbcloud/uikit'

interface VerticalPropertyProps extends BoxProps {
  label: string
  children: React.ReactNode
}

const VerticalProperty = ({ children, label, ...restProps }: VerticalPropertyProps) => {
  return (
    <Box {...restProps}>
      <Typography variant="body-md" color="carbon.7" mb={8}>
        {label}
      </Typography>
      <Typography variant="body-lg" color="carbon.9">
        {children}
      </Typography>
    </Box>
  )
}

const LeftProperty = ({ children, ...restProps }: VerticalPropertyProps) => {
  return (
    <VerticalProperty pt="md" pb="md" sx={{ flex: 1 }} {...restProps}>
      {children}
    </VerticalProperty>
  )
}

const RightProperty = ({ children, ...restProps }: VerticalPropertyProps) => {
  return (
    <VerticalProperty pt="md" pb="md" pl="xl" sx={{ flex: 1 }} {...restProps}>
      {children}
    </VerticalProperty>
  )
}

interface TwoColsPropRowProps {
  left: React.ReactNode
  right: React.ReactNode
}

export const TwoColsPropRow = ({ left, right }: TwoColsPropRowProps) => {
  return (
    <Flex
      wrap="nowrap"
      align="flex-start"
      gap="md"
      sx={{
        ':first-of-type > div': {
          paddingTop: 0
        },
        ':last-of-type > div': {
          paddingBottom: 0
        }
      }}
    >
      {left}
      <Divider orientation="vertical" color="carbon.4" />
      {right}
    </Flex>
  )
}

TwoColsPropRow.Left = LeftProperty
TwoColsPropRow.Right = RightProperty