import React from 'react';
import { Box, MainButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'react-i18next';

type GetHelpButtonsProps = {
  color: MainColorType;
  href: string;
};

export const GetHelpButtons = ({ color, href }: GetHelpButtonsProps) => {
  const { t } = useTranslation('fiber');
  return (
    <Box
      display="flex"
      justifyContent="space-between"
      alignItems="center"
      flexDirection={{ sm: 'column', lg: 'row' }}
    >
      <Box width={{ sm: '100%', lg: '7/12' }} marginBottom={{ sm: 2, lg: undefined }}>
        <Text variant="pLargeBold">{t('helpButtons.description')}</Text>
      </Box>
      <Box width={{ sm: '100%', lg: '4/12' }}>
        <MainButton
          colorScheme={color}
          text={t('helpButtons.buttonTitle')}
          dottedShadow="none"
          icon="longArrowRight"
          renderAs="a"
          href={href}
        />
      </Box>
    </Box>
  );
};