<template>
  <span
    class="tw-flex tw-cursor-pointer tw-items-center tw-border tw-rounded-[0.4rem] tw-w-fit tw-px-[2rem] tw-py-[1.2rem] tw-mb-[0.8rem]"
    :class="{
      ['tw-bg-white']: !isChosen,
      ['tw-bg-blue-400 tw-text-white']: isChosen,
      ['tw-m-auto']: center,
      ['tw-bg-gray-300']: disabled
    }"
    @click="!disabled && $emit('click', id)"
  >
    <img
      v-if="iconUrl"
      :src="iconUrl"
      class="tw-w-8"
      :class="{
        ['tw-brightness-0 tw-invert']: isChosen,
        ['tw-sepia-[9%] tw-saturate-[126%] tw-hue-rotate-[202deg] tw-brightness-[87%] tw-contrast-[80%] tw-invert-[59%]']: disabled
      }"
      alt="Icon_URL for the current part"
    />
    <span
      class="tw-mx-[2rem]  tw-text-2xl"
      :class="{
        ['tw-text-white']: isChosen,
        ['tw-text-gray-500']: disabled
      }"
    >{{ name }}
    </span>
    <span class="tw-text-[0px]">
      <span
        class="tw-text-[2rem] tw-leading-[2.8rem]"
        :class="{
          ['tw-text-blue-400']: !isChosen && !disabled && !isChild,
          ['tw-text-[#6fc9e8]']: !isChosen && !disabled && isChild,
          ['tw-text-white']: isChosen,
          ['tw-text-gray-500']: disabled
        }"
      >{{ distributionRate ? distributionRate : 0 }}</span>
      <span
        class="tw-text-[1.2rem] tw-leading-7 tw-self-end"
        :class="{
          ['tw-text-white']: isChosen,
          ['tw-text-gray-500']: disabled
        }"
      >
        %
      </span>
    </span>
  </span>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    },
    iconUrl: {
      type: String,
      default: null
    },
    name: {
      type: String,
      default: 'No Title'
    },
    distributionRate: {
      type: Number,
      default: 0
    },
    isChosen: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    },
    isChild: {
      type: Boolean,
      default: false
    }
  }
}
</script>
