import { ActionIcon, Tooltip } from '@pikku/mantine/core'
import { IconMailQuestion } from '@tabler/icons-react'
import { asI18n } from '@pikku/react'

export const HelpAffix: React.FunctionComponent = () => {
  return (
    <div style={{ position: 'absolute', bottom: 20, right: 20 }} >
      <Tooltip label={asI18n('Need help? Contact us')} position="left">
        <ActionIcon
          component="a"
          href="mailto:info@hey-germany.com"
          size={50}
          radius="xl"
          variant="filled"
          color="primary"
          style={{
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
          }}
        >
          <IconMailQuestion size={28} stroke={2} color="white" />
        </ActionIcon>
      </Tooltip>
    </div>
  )
}