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

defineProps({
  color: {
    type: String,
    default: $dt('colors'),
  },
  type: {
    type: String as PropType<'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'>,
    default: 'primary',
  },
  display: {
    type: String as PropType<'solid' | 'outline' | 'transparent'>,
    default: 'solid',
  },
  pill: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>,
    default: 'md',
  },
  icon: {
    type: String,
    required: false,
  },
  iconPosition: {
    type: String as PropType<'leading' | 'trailing'>,
    default: 'leading',
  },
})
</script>

<template>
  <button
    :class="[type, display, size, { pill }]"
    :style="{
      flexDirection: iconPosition === 'leading' ? 'row' : 'row-reverse',
    }"
  >
    <!-- TODO: Fix absolute values by using $dt() -->
    <Icon
      v-if="icon"
      :type="type"
      :style="{
        marginLeft: iconPosition === 'leading' ? '0' : '0.5rem',
        marginRight: iconPosition === 'trailing' ? '0' : '0.5rem',
      }"
      :name="icon"
    />

    <ContentSlot :use="$slots.default" unwrap="p" />
  </button>
</template>

<style scoped lang="ts">
css({
  button: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    whiteSpace: 'nowrap',
    variants: {
      primary: {
        backgroundColor: '{colors.primary.600}',
        color: '{colors.primary.200}',
        '&:hover': {
          backgroundColor: '{colors.primary.400}'
        }
      },
      secondary: {
        backgroundColor: '{colors.gray.300}',
        color: 'black',
        '&:hover': {
          backgroundColor: '{colors.gray.100}'
        }
      },
      success: {
        backgroundColor: '{colors.green.400}',
        color: '{colors.green.900}',
        ':hover': {
          backgroundColor: '{colors.green.200}'
        }
      },
      info: {
        backgroundColor: '{colors.blue.400}',
        color: '{colors.blue.900}',
        '&:hover': {
          backgroundColor: '{colors.blue.200}'
        }
      },
      warning: {
        backgroundColor: '{colors.yellow.400}',
        color: '{colors.yellow.900}',
        '&:hover': {
          backgroundColor: '{colors.yellow.200}'
        }
      },
      danger: {
        backgroundColor: '{colors.red.400}',
        color: '{colors.red.900}',
        '&:hover': {
          backgroundColor: '{colors.red.200}'
        }
      },
      outline: {
        backgroundColor: 'transparent',
        borderColor: 'inherit',
        borderWidth: '1px',
        borderStyle: 'solid',
        '&:hover': {
          backgroundColor: 'transparent'
        },
        '&.primary': {
          color: '{colors.primary.700}',
          borderColor: '{colors.primary.700}',
          '&:hover': {
            color: '{colors.primary.400}',
            borderColor: '{colors.primary.400}',
          }
        },
        '&.secondary': {
          color: '{colors.gray.700}',
          borderColor: '{colors.gray.700}',
          '&:hover': {
            color: '{colors.gray.400}',
            borderColor: '{colors.gray.400}'
          }
        }
      },
      xs: {
        padding: '6px 12px',
        fontSize: '12px',
        lineHeight: '18px',
        borderRadius: '6px',
        '&:deep(svg)': {
          width: '14px',
          height: '14px'
        }
      },
      sm: {
        padding: '6px 12px',
        fontSize: '14px',
        lineHeight: '21px',
        borderRadius: '6px',
        '&:deep(svg)': {
          width: '14px',
          height: '14px'
        }
      },
      md: {
        padding: '8px 16px',
        fontSize: '14px',
        lineHeight: '21px',
        borderRadius: '8px',
        '&:deep(svg)': {
          width: '16px',
          height: '16px'
        }
      },
      lg: {
        padding: '8px 16px',
        fontSize: '16px',
        lineHeight: '24px',
        borderRadius: '8px',
        '&:deep(svg)': {
          width: '16px',
          height: '16px'
        }
      },
      xl: {
        padding: '12px 24px',
        fontSize: '16px',
        lineHeight: '24px',
        borderRadius: '8px',
        '&:deep(svg)': {
          width: '18px',
          height: '18px'
        }
      },
      pill: {
        borderRadius: '9999px'
      }
    }
  }
})
</style>
