import React from 'react';
import {View} from 'react-native';
import {IconArrowRight} from '@tabler/icons-react-native';
import {Button} from '@components/_HuGo/Button';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {FooterProps} from './interfaces';

export function Footer({
  primaryText,
  primaryVariant = 'primary',
  onPrimaryPress,
  primaryButtonContainerStyle,
  secondaryText,
  onSecondaryPress,
  containerStyle,
}: FooterProps) {
  const {theme} = useTheme();

  const isThereLinkDescription = onSecondaryPress && secondaryText;
  return (
    <View
      style={[
        {
          backgroundColor: theme.background.elements.default,
          borderColor: theme.border.neutral.default,
        },
        styles.container,
        containerStyle,
        isThereLinkDescription ? styles.justifyContentAround : null,
      ]}>
      {secondaryText && (
        <>
          {onSecondaryPress ? (
            <Button
              variant="tertiary"
              size="sm"
              text={secondaryText}
              onPress={onSecondaryPress}
            />
          ) : (
            <Typography variant="xxs" color={theme.text.neutral.lighter}>
              {secondaryText}
            </Typography>
          )}
        </>
      )}
      {primaryText && (
        <Button
          size="sm"
          variant={primaryVariant}
          text={primaryText}
          onPress={onPrimaryPress}
          IconRight={primaryVariant === 'tertiary' ? IconArrowRight : undefined}
          containerStyle={primaryButtonContainerStyle}
        />
      )}
    </View>
  );
}
