import { createStyle } from '@gluestack-style/react';

export const Badge = createStyle({
  'flexDirection': 'row',
  'alignItems': 'center',
  'borderRadius': '$xs',
  'variants': {
    action: {
      error: {
        bg: '$backgroundLightError',
        borderColor: '$error300',
        _icon: {
          color: '$error600',
        },
        _text: {
          color: '$error600',
        },
        _dark: {
          bg: '$backgroundDarkError',
          borderColor: '$error700',
          _text: {
            color: '$error400',
          },
          _icon: {
            color: '$error400',
          },
        },
      },
      warning: {
        bg: '$backgroundLightWarning',
        borderColor: '$warning300',
        _icon: {
          color: '$warning600',
        },
        _text: {
          color: '$warning600',
        },
        _dark: {
          bg: '$backgroundDarkWarning',
          borderColor: '$warning700',
          _text: {
            color: '$warning400',
          },
          _icon: {
            color: '$warning400',
          },
        },
      },
      success: {
        bg: '$backgroundLightSuccess',
        borderColor: '$success300',
        _icon: {
          color: '$success600',
        },
        _text: {
          color: '$success600',
        },
        _dark: {
          bg: '$backgroundDarkSuccess',
          borderColor: '$success700',
          _text: {
            color: '$success400',
          },
          _icon: {
            color: '$success400',
          },
        },
      },
      info: {
        bg: '$backgroundLightInfo',
        borderColor: '$info300',
        _icon: {
          color: '$info600',
        },
        _text: {
          color: '$info600',
        },
        _dark: {
          bg: '$backgroundDarkInfo',
          borderColor: '$info700',
          _text: {
            color: '$info400',
          },
          _icon: {
            color: '$info400',
          },
        },
      },
      muted: {
        bg: '$backgroundLightMuted',
        borderColor: '$secondary300',
        _icon: {
          color: '$secondary600',
        },
        _text: {
          color: '$secondary600',
        },
        _dark: {
          bg: '$backgroundDarkMuted',
          borderColor: '$secondary700',
          _text: {
            color: '$secondary400',
          },
          _icon: {
            color: '$secondary400',
          },
        },
      },
    },

    variant: {
      solid: {},
      outline: {
        borderWidth: '$1',
      },
    },

    size: {
      sm: {
        px: '$2',
        _icon: {
          props: {
            size: '2xs',
          },
        },
        _text: {
          props: {
            size: '2xs',
          },
        },
      },
      md: {
        px: '$2',
        _icon: {
          props: {
            size: 'xs',
          },
        },
        _text: {
          props: {
            size: 'xs',
          },
        },
      },
      lg: {
        px: '$2',
        _icon: {
          props: { size: 'sm' },
        },
        _text: {
          props: { size: 'sm' },
        },
      },
    },
  },

  ':disabled': {
    opacity: 0.5,
  },
  'defaultProps': {
    action: 'info',
    variant: 'solid',
    size: 'md',
  },
});