import React from 'react';
import {View} from 'react-native';
import {FABButton} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  text: string;
  onPress: () => void;
  isVisible: boolean;
  extraPadding?: number;
}

export function ServiceManagementFABButton({
  text,
  onPress,
  isVisible,
  extraPadding = 0,
}: Props) {
  const {spacing} = useTheme();
  const bottom = useSafeAreaBottomPadding({extra: spacing.x4 + extraPadding});

  return isVisible ? (
    <View style={[styles.container, {bottom}]}>
      <FABButton
        text={text}
        onPress={onPress}
        style={styles.button}
        size="sm"
      />
    </View>
  ) : null;
}