import { Flex, Avatar, Typography, ActionIcon, Box } from '@tidbcloud/uikit'
import { IconBookOpen02, IconHelpCircle } from '@tidbcloud/uikit/icons'
import { ReactNode } from 'react'

import useStores from 'dbaas/stores/useStores'

type ItemProps = {
  logoName?: 'BookOpen02' | 'HelpCircle'
  logo?: ReactNode
  text: ReactNode
}

const logos = {
  BookOpen02: <IconBookOpen02 />,
  HelpCircle: <IconHelpCircle />
}

const Item: React.FC<React.PropsWithChildren<ItemProps>> = ({ logoName, logo, text }) => {
  return (
    <Flex align="center" justify="center" gap={8} h={32} mr={40}>
      {logoName ? <ActionIcon size={20}>{logos[logoName]}</ActionIcon> : <>{logo || <Avatar />}</>}
      <Typography variant="body-lg">{text}</Typography>
    </Flex>
  )
}

const Footer = () => {
  const {
    store: {
      userProfile: { email }
    }
  } = useStores()
  return (
    <Flex
      align="center"
      justify="center"
      sx={(theme) => ({
        borderTop: `1px solid ${theme.colors.carbon[4]}`,
        backgroundColor: theme.colors.carbon[2],
        padding: '24px 0'
      })}
    >
      <Item
        logo={
          <Avatar color="peacock" radius="xl">
            {(email[0] || '').toUpperCase()}
          </Avatar>
        }
        text={email}
      />
      <Item
        logoName="BookOpen02"
        text={
          <Box
            component="a"
            c="carbon.8"
            href="https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-vercel"
            target="_blank"
          >
            Docs
          </Box>
        }
      />
      <Item
        logoName="HelpCircle"
        text={
          <Typography component="a" href="mailto:tidbcloud-support@pingcap.com">
            Support
          </Typography>
        }
      ></Item>
    </Flex>
  )
}

export default Footer