import { StyleSheet } from 'react-native';
import { typography, borderRadius } from '@theme';

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 10,
      paddingVertical: 4,
      borderRadius: borderRadius.full,
      alignSelf: 'flex-start',
    },
    dot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      marginRight: 6,
    },
    label: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.semibold,
      textTransform: 'capitalize',
    },
    onlineBg: {
      backgroundColor: '#E8F8F0',
    },
    offlineBg: {
      backgroundColor: '#FEF0E6',
    },
    busyBg: {
      backgroundColor: '#FEF9E7',
    },
    onDeliveryBg: {
      backgroundColor: '#EBF5FB',
    },
    onlineText: {
      color: colors.statusOnline,
    },
    offlineText: {
      color: colors.statusOffline,
    },
    busyText: {
      color: colors.statusBusy,
    },
    onDeliveryText: {
      color: colors.statusOnDelivery,
    },
  });