<script lang="ts" setup>
import { PropType } from 'vue'
import { MDIcon } from './MDIcon.types'

defineProps({
  name: { type: String as PropType<MDIcon>, required: true },
  type: {
    type: String as PropType<'' | 'outlined' | 'sharp' | 'round' | 'two-tone'>,
    default: '',
  },
  p_PointerCursor: { type: Boolean, default: true },
})
</script>

<template>
  <div
    :class="`md-icon ${type ? `material-icons-${type}` : 'material-icons'} ${
      p_PointerCursor ? '_pointer_cursor' : 'pointer_unset'
    }`"
  >
    {{ name }}
  </div>
</template>

<style scoped>
.md-icon {
  user-select: none;
}

._pointer_cursor {
  cursor: pointer;
}
</style>
