<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  size: {
    type: String as PropType<'small' | 'large'>,
    default: 'large',
  },
  rounded: {
    type: Boolean,
    default: false,
  },
  outlined: {
    type: Boolean,
    default: false,
  },
  color: {
    type: String as PropType<
      'gray' | 'green' | 'yellow' | 'orange' | 'red' | 'pear' | 'teal' | 'lightblue' | 'blue' | 'royalblue' | 'purple' | 'pink' | 'ruby' | 'dark' | 'transparent'
    >,
    default: 'gray',
  },
  icon: {
    type: String,
    required: false,
  },
  iconPosition: {
    type: String as PropType<'leading' | 'trailing'>,
    default: null,
  },
})
</script>

<template>
  <span class="badge" :class="[color, size, { rounded }, { outlined }]">
    <Icon v-if="icon" class="icon" :name="icon" :class="[iconPosition]" />
    <ContentSlot :use="$slots.default" unwrap="p" />
  </span>
</template>

<style scoped lang="ts">
css({
  '.icon': {
    variants: {
      leading: {
        marginRight: '{space.4}'
      },
      trailing: {
        order: 1,
        marginLeft: '{space.4}'
      }
    }
  },
  '.badge': {
    display: 'flex',
    alignItems: 'center',
    borderRadius: '{radii.xs}',
    fontWeight: '{fontWeights.normal}',
    borderWidth: '{space.1}',
    borderStyle: 'solid',
    borderColor: 'transparent', // or same color as bg
    variants: {
      small: {
        padding: '{space.4} {space.8}',
        fontSize: '{fontSizes.xs}',
        lineHeight: '{leads.snug}',
      },
      large: {
        padding: '{space.4} {space.12}',
        fontSize: '{fontSizes.sm}',
        lineHeight: '{leads.snug}',
      },
      rounded: {
        borderRadius: '{radii.full}'
      },
      outlined: {
        backgroundColor: 'transparent !important',
        borderColor: 'currentColor'
      },
      gray: {
        backgroundColor: '{colors.gray.50}',
        color: '{colors.gray.700}',
        '&:deep(svg)': {
          color: '{colors.gray.600} !important',
        }
      },
      green: {
        backgroundColor: '{colors.green.50}',
        color: '{colors.green.700}',
        '&:deep(svg)': {
          color: '{colors.green.600} !important',
        }
      },
      yellow: {
        backgroundColor: '{colors.yellow.50}',
        color: '{colors.yellow.700}',
        '&:deep(svg)': {
          color: '{colors.yellow.600} !important',
        }
      },
      orange: {
        backgroundColor: '{colors.orange.50}',
        color: '{colors.orange.700}',
        '&:deep(svg)': {
          color: '{colors.orange.600} !important',
        }
      },
      red: {
        backgroundColor: '{colors.red.50}',
        color: '{colors.red.700}',
        '&:deep(svg)': {
          color: '{colors.red.600} !important',
        }
      },
      pear: {
        backgroundColor: '{colors.pear.50}',
        color: '{colors.pear.700}',
        '&:deep(svg)': {
          color: '{colors.pear.600} !important',
        }
      },
      teal: {
        backgroundColor: '{colors.teal.50}',
        color: '{colors.teal.700}',
        '&:deep(svg)': {
          color: '{colors.teal.600} !important',
        }
      },
      lightblue: {
        backgroundColor: '{colors.lightblue.50}',
        color: '{colors.lightblue.700}',
        '&:deep(svg)': {
          color: '{colors.lightblue.600} !important',
        }
      },
      blue: {
        backgroundColor: '{colors.blue.50}',
        color: '{colors.blue.700}',
        '&:deep(svg)': {
          color: '{colors.blue.600} !important',
        }
      },
      indigoblue: {
        backgroundColor: '{colors.indigoblue.50}',
        color: '{colors.indigoblue.700}',
        '&:deep(svg)': {
          color: '{colors.indigoblue.600} !important',
        }
      },
      royalblue: {
        backgroundColor: '{colors.royalblue.50}',
        color: '{colors.royalblue.700}',
        '&:deep(svg)': {
          color: '{colors.royalblue.600} !important',
        }
      },
      purple: {
        backgroundColor: '{colors.purple.50}',
        color: '{colors.purple.700}',
        '&:deep(svg)': {
          color: '{colors.purple.600} !important',
        }
      },
      pink: {
        backgroundColor: '{colors.pink.50}',
        color: '{colors.pink.700}',
        '&:deep(svg)': {
          color: '{colors.pink.600} !important',
        }
      },
      ruby: {
        backgroundColor: '{colors.ruby.50}',
        color: '{colors.ruby.700}',
        '&:deep(svg)': {
          color: '{colors.ruby.600} !important',
        }
      },
      dark: {
        backgroundColor: '{colors.gray.900}',
        color: '{colors.gray.200}',
        '&:deep(svg)': {
          color: '{colors.gray.50} !important',
        }
      },
      transparent: {
        backgroundColor: 'transparent',
        color: '{colors.gray.700}',
        '&:deep(svg)': {
          color: '{colors.gray.600} !important',
        }
      }
    }
  }
})
</style>
