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

defineProps({
  appearance: {
    type: String as PropType<'default' | 'danger' | 'success' | 'info' | 'warning'>,
    default: 'default',
  },
  icon: {
    type: String,
    required: false,
  },
})
</script>

<template>
  <div class="callout" :class="[appearance]">
    <Icon v-if="icon" class="icon" :name="icon" size="24px" />
    <ContentSlot :use="$slots.default" unwrap="p" />
  </div>
</template>

<style lang="ts" scoped>
css({
  '.callout': {
    display: 'flex',
    fontSize: '{fontSizes.base}',
    fontWeight: '{fontWeights.normal}',
    lineHeight: '{leads.normal}',
    padding: '{space.24}',
    borderRadius: '{radii.xl}',
    border: '1px solid transparent',
    cursor: 'pointer',
    '.icon': {
      marginRight: '{space.12}'
    },
    variants: {
      default: {
        backgroundColor: '{colors.gray.50}',
        color: '{colors.gray.600}',
        '&:hover': {
          borderColor: '{colors.gray.200}',
        },
        '.icon': {
          color: '{colors.gray.800}'
        },
      },
      danger: {
        backgroundColor: '{colors.red.50}',
        color: '{colors.red.700}',
        '&:hover': {
          borderColor: '{colors.red.400}',
        },
        '.icon': {
          color: '{colors.red.500}'
        },
      },
      success: {
        backgroundColor: '{colors.green.50}',
        color: '{colors.green.700}',
        '&:hover': {
          borderColor: '{colors.green.400}',
        },
        '.icon': {
          color: '{colors.green.500}'
        },
      },
      info: {
        backgroundColor: '{colors.blue.50}',
        color: '{colors.blue.700}',
        '&:hover': {
          borderColor: '{colors.blue.400}',
        },
        '.icon': {
          color: '{colors.blue.500}'
        },
      },
      warning: {
        backgroundColor: '{colors.yellow.50}',
        color: '{colors.yellow.700}',
        '&:hover': {
          borderColor: '{colors.yellow.200}',
        },
        '.icon': {
          color: '{colors.yellow.500}'
        },
      }
    }
  }
})
</style>