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

export const Avatar = createStyle({
  borderRadius: '$full',
  justifyContent: 'center',
  alignItems: 'center',
  position: 'relative',
  bg: '$primary600',
  variants: {
    size: {
      'xs': {
        w: '$6',
        h: '$6',

        _badge: {
          w: '$2',
          h: '$2',
        },

        _text: {
          props: { size: '2xs' },
        },
      },

      'sm': {
        w: '$8',
        h: '$8',

        _badge: {
          w: '$2',
          h: '$2',
        },

        _text: {
          props: { size: 'xs' },
        },
      },

      'md': {
        w: '$12',
        h: '$12',

        _badge: {
          w: '$3',
          h: '$3',
        },

        _text: {
          props: { size: 'md' },
        },
      },

      'lg': {
        w: '$16',
        h: '$16',

        _badge: {
          w: '$4',
          h: '$4',
        },

        _text: {
          props: { size: 'xl' },
        },
      },

      'xl': {
        w: '$24',
        h: '$24',

        _badge: {
          w: '$6',
          h: '$6',
        },

        _text: {
          props: { size: '3xl' },
        },
      },

      '2xl': {
        w: '$32',
        h: '$32',

        _badge: {
          w: '$8',
          h: '$8',
        },

        _text: {
          props: { size: '5xl' },
        },
      },
    },
  },
  defaultProps: {
    size: 'md',
  },
});