import React from 'react';
import {View} from 'react-native';
import {Typography} from '@components';
import {
  ServiceManagementTask,
  ServiceManagementTaskType,
} from '@modules/serviceManagement/interfaces';
import {TASK_PREFIX} from '@modules/serviceManagement/constants';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  task: ServiceManagementTask;
  headerButton?: React.ReactNode;
}

function ServiceManagementTaskHeader({task, headerButton}: Props) {
  const {theme} = useTheme();
  const taskNumber =
    task.type === ServiceManagementTaskType.Approval
      ? task.parentTask.taskNumber
      : task.taskNumber;

  return (
    <View
      style={[styles.container, {borderColor: theme.border.neutral.default}]}>
      <View style={styles.row}>
        <Typography
          color={theme.text.neutral.lighter}
          variant="xs">{`${TASK_PREFIX}${taskNumber}`}</Typography>
      </View>
      {headerButton}
    </View>
  );
}

export default ServiceManagementTaskHeader;