<script setup lang="ts">
defineProps({
  icon: {
    type: String,
    required: false,
  },
  textColor: {
    type: String,
    default: $dt('colors.gray.700'),
  },
})
</script>

<template>
  <li :style="{ color: textColor }">
    <Icon v-if="icon" :name="icon" />
    <ContentSlot :use="$slots.default" unwrap="p" />
  </li>
</template>

<style scoped lang="ts">
css({
  li: {
    width: '100%',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    columnGap: '{space.8}',
    fontSize: '{fontSize.base}'
  },
})
</style>
