import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {Icon} from '@tabler/icons-react-native';
import {Button, Title} from '@components';

import {styles} from './styles';

interface Props {
  title: string;
  buttonText: string;
  IconButton?: Icon;
  onPressButton?: () => void;
  buttonDisabled?: boolean;
  showButton?: boolean;
  style?: StyleProp<ViewStyle>;
}

export function ActionTitle({
  title,
  buttonText,
  IconButton,
  onPressButton,
  buttonDisabled,
  showButton = true,
  style,
}: Props) {
  return (
    <View style={[styles.titleContainer, style]}>
      <Title title={title} />
      {showButton && onPressButton && (
        <Button
          text={buttonText}
          onPress={onPressButton}
          variant="secondary"
          IconRight={IconButton}
          size="sm"
          disabled={buttonDisabled}
        />
      )}
    </View>
  );
}