import React from 'react';
import {Pressable, PressableProps} from 'react-native';
import {IconProps} from '@tabler/icons-react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props extends PressableProps {
  Icon?: React.ComponentType<IconProps>;
  onPress: () => void;
  active?: boolean;
}

export function BottomOptionButton({disabled, Icon, active, ...props}: Props) {
  const {theme} = useTheme();
  return (
    <Pressable
      {...props}
      disabled={disabled}
      style={[
        styles.baseButton,
        active && {backgroundColor: theme.neutralBgTrans},
      ]}>
      {Icon && (
        <Icon
          stroke={disabled ? theme.neutralTextDisabled : theme.neutralText}
        />
      )}
    </Pressable>
  );
}