import { Box, Center, UnstyledButtonProps, Group, GroupProps, Typography, UnstyledButton } from '@tidbcloud/uikit'
import React, { forwardRef, PropsWithChildren } from 'react'

interface NavButtonProps extends PropsWithChildren<UnstyledButtonProps> {
  icon?: React.ReactNode
  contentProps?: Omit<GroupProps, 'children'>
  rightSection?: React.ReactNode
  onClick?: () => void
}

export const NavButton = forwardRef<HTMLDivElement, NavButtonProps>(
  ({ icon, contentProps = {}, children, rightSection, ...others }, ref) => (
    <Box ref={ref} px={8} py={4} sx={{ overflow: 'hidden' }}>
      <UnstyledButton
        display="block"
        w="100%"
        px="xs"
        py={4}
        sx={(theme) => ({
          overflow: 'hidden',
          borderRadius: theme.defaultRadius,
          color: theme.colors.carbon[8],
          '&:hover': {
            color: theme.colors.carbon[8],
            backgroundColor: theme.colors.carbon[3]
          },
          '&:active': {
            color: theme.colors.carbon[8],
            backgroundColor: theme.colors.carbon[4]
          }
        })}
        {...others}
      >
        <Group gap="xs" wrap="nowrap" {...contentProps}>
          {!!icon && <Center sx={{ flexShrink: 0 }}>{icon}</Center>}
          {!!children && (
            <Box sx={{ flex: 1 }}>
              <Typography variant="label-lg" lineClamp={1} c="inherit" lh="24px" sx={{ wordBreak: 'break-all' }}>
                {children}
              </Typography>
            </Box>
          )}
          {!!rightSection && rightSection}
        </Group>
      </UnstyledButton>
    </Box>
  )
)