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

export type BadgeStatusType = 'online' | 'offline' | 'busy' | 'onDelivery';

interface StatusBadgeProps {
  status: BadgeStatusType;
}

export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const getStyleConfig = () => {
    switch (status) {
      case 'online':
        return {
          bg: styles.onlineBg,
          text: styles.onlineText,
          dotColor: colors.statusOnline,
        };
      case 'offline':
        return {
          bg: styles.offlineBg,
          text: styles.offlineText,
          dotColor: colors.statusOffline,
        };
      case 'busy':
        return {
          bg: styles.busyBg,
          text: styles.busyText,
          dotColor: colors.statusBusy,
        };
      case 'onDelivery':
        return {
          bg: styles.onDeliveryBg,
          text: styles.onDeliveryText,
          dotColor: colors.statusOnDelivery,
        };
      default:
        return {
          bg: styles.offlineBg,
          text: styles.offlineText,
          dotColor: colors.statusOffline,
        };
    }
  };

  const config = getStyleConfig();

  return (
    <View style={[styles.container, config.bg]}>
      <View style={[styles.dot, { backgroundColor: config.dotColor }]} />
      <Text style={[styles.label, config.text]}>{status}</Text>
    </View>
  );
};
export default StatusBadge;