import React, {FC} from 'react';
import {View} from 'react-native';
import {IconProps} from '@tabler/icons-react-native';
import {Button} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface ButtonProps {
  onSubmit: () => void;
  label: string;
  icon?: FC<IconProps>;
  isLoading?: boolean;
}

interface Props {
  primary?: ButtonProps;
  secondary?: ButtonProps;
}

export function Footer({primary, secondary}: Props) {
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.bottomContainer,
        {backgroundColor: theme.background.elements.default},
      ]}>
      {primary && (
        <Button
          onPress={primary.onSubmit}
          text={primary.label}
          isLoading={primary.isLoading}
          IconLeft={primary.icon}
        />
      )}
      {secondary && (
        <Button
          variant="secondary"
          onPress={secondary.onSubmit}
          text={secondary.label}
          isLoading={secondary.isLoading}
          IconLeft={secondary.icon}
        />
      )}
    </View>
  );
}