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

const props = defineProps({
  bgColor: {
    type: String,
    default: 'white',
  },
  bgHoverColor: {
    type: String,
    default: $dt('colors.gray.100'),
  },
  textColor: {
    type: String,
    default: $dt('colors.gray.900'),
  },
  icon: {
    type: String,
    required: false,
  },
  iconPosition: {
    type: String as PropType<'leading' | 'trailing'>,
    default: 'leading',
  },
  notification: {
    type: Boolean,
    default: false,
  },
  notificationColor: {
    type: String,
    default: $dt('colors.primary.400'),
  },
})

const backgroundColor = computed(() => {
  return {
    '--background-color': props.bgColor ? props.bgColor : 'transparent',
    '--background-color-hover': props.bgHoverColor,
  }
})
</script>

<template>
  <li :style="[{ color: textColor }, backgroundColor]">
    <button :class="[iconPosition]">
      <Icon v-if="icon" :name="icon" />

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

        <span
          v-if="notification"
          :style="{
            backgroundColor: props.notificationColor,
          }"
        />
      </div>
    </button>
  </li>
</template>

<style scoped lang="ts">
css({
  li: {
    whiteSpace: 'nowrap',
    listStyle: 'none',
    height: '{size.40}',
    width: '100%',
    fontSize: '{fontSizes.sm}',
    borderRadius: '{radii.md}',
    backgroundColor: 'var(--background-color)',
    '&:hover': {
      backgroundColor: 'var(--background-color-hover)'
    }
  },
  button: {
    padding: '{space.8} {space.16}',
    display: 'flex',
    columnGap: '{space.8}',
    alignItems: 'center',
    width: '100%',
    height: '{size.40}',
    flexDirection: 'row',
    variants: {
      trailing: {
        flexDirection: 'row-reverse'
      }
    },

    '& div': {
      display: 'flex',
      columnGap: '{space.8}',
      alignItems: 'center',
      width: '100%',
      height: '100%',
      paddingBottom: '{space.2}',

      '& span': {
        height: '4px',
        width: '4px',
        marginTop: '{space.2}',
        borderRadius: '{radii.full}'
      }
    }
  }
})
</style>
