import React from 'react';
import { View, Text } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './jobStatusBanner.styles';

interface JobStatusBannerProps {
  stepLabel: string;
  stepDetail: string;
  backgroundColor?: string;
}

export const JobStatusBanner: React.FC<JobStatusBannerProps> = ({
  stepLabel,
  stepDetail,
  backgroundColor,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  return (
    <View style={[styles.container, backgroundColor ? { backgroundColor } : null]}>
      <Text style={styles.label}>{stepLabel}</Text>
      <Text style={styles.detail}>{stepDetail}</Text>
    </View>
  );
};
export default JobStatusBanner;