import { Box, BoxProps, Drawer, DrawerProps, Group, GroupProps } from '@tidbcloud/uikit'
import { PropsWithChildren } from 'react'

export const DetailsDrawer = ({ children, ...restProps }: DrawerProps) => {
  return (
    <Drawer
      position="right"
      size={640}
      styles={(theme) => ({
        drawer: {
          display: 'flex',
          flexDirection: 'column'
        },
        body: {
          flex: 1,
          display: 'flex',
          flexDirection: 'column',
          overflowY: 'auto'
        },
        header: {
          padding: '16px 16px 16px 24px',
          marginBottom: 0,
          borderBottom: `1px solid ${theme.colors.carbon[4]}`
        },
        title: {
          fontWeight: 700,
          fontSize: 16,
          lineHeight: 1.5,
          color: theme.colors.carbon[9]
        }
      })}
      {...restProps}
    >
      {children}
    </Drawer>
  )
}

const DetailsDrawerBody = ({ children, ...restProps }: PropsWithChildren<BoxProps>) => {
  return (
    <Box sx={{ flex: 1 }} {...restProps}>
      {children}
    </Box>
  )
}

const DetailsDrawerFooter = ({ children, ...restProps }: GroupProps) => {
  return (
    <Group
      justify="flex-end"
      p="xl"
      sx={(theme) => ({ borderTop: `1px solid ${theme.colors.carbon[4]}` })}
      {...restProps}
    >
      {children}
    </Group>
  )
}

DetailsDrawer.Body = DetailsDrawerBody
DetailsDrawer.Footer = DetailsDrawerFooter