<template>
  <button
    :class="[
      active ? 'bg-blue-500 text-white' : 'text-gray-900',
      'group flex w-full items-center rounded-md px-2 py-2 text-sm',
    ]"
    @click="emit('clicked')"
  >
    <component v-if="option.icon" :is="option.icon" class="mr-2 h-5 w-5" />
    <component
      v-if="option.component"
      :is="option.component"
      :option="option"
    />
    <span v-else>{{ option.title }}</span>
  </button>
</template>

<script setup lang="ts">
import { MenuOption } from './menu.interfaces';

const props = defineProps<{
  active: boolean;
  option: MenuOption;
}>();

const emit = defineEmits<{
  (e: 'clicked'): void;
}>();
</script>
