import React from 'react';
import { StyleSheet, Text } from 'react-native';
import { colors, radius, spacing, typography } from '../../../theme';
import { DeplacementStatus } from '../types/deplacements.types';
import { getDeplacementStatusLabel } from '../utils/deplacements.utils';

type DeplacementStatusBadgeProps = {
  status: DeplacementStatus;
};

const DeplacementStatusBadge = ({ status }: DeplacementStatusBadgeProps) => {
  return (
    <Text style={[styles.badge, styles[status]]}>
      {getDeplacementStatusLabel(status)}
    </Text>
  );
};

export default DeplacementStatusBadge;

const styles = StyleSheet.create({
  badge: {
    fontSize: typography.fontSize.xs,
    paddingHorizontal: spacing.sm,
    paddingVertical: 4,
    borderRadius: radius.sm,
    overflow: 'hidden',
  },
  non_realise: {
    backgroundColor: colors.gray200,
    color: colors.textPrimary,
  },
  en_cours: {
    backgroundColor: colors.primary,
    color: colors.white,
  },
  realise: {
    backgroundColor: colors.success || '#6FBF73',
    color: colors.white,
  },
});