<template functional>
  <td
    :class="[
      `${data.class}`,
      'hive-date-item', {
        'hive-date-item--active': props.active,
        'hive-date-item--disabled': props.disabled,
        'hive-date-item--highlight': props.highlight,
        'hive-date-item--active-start': props.startOfRange,
        'hive-date-item--active-end': props.endOfRange,
        'hive-date-item--additional': props.additional,
        'hive-date-item--now': props.now,
        'hive-date-item--first-day-of-month': props.firstDayOfMonth,
        'hive-date-item--last-day-of-month': props.lastDayOfMonth
      }
    ]"
  >
    <div
      class="hive-date-item__wrapper"
      @click="function() {
        if (!props.disabled) {
          props.onClick(props.value)
        }
      }"
      @mouseenter="function() {
        props.onMouseEnter(props.value);
      }"
    >
      <span class="hive-date-item__text">{{ props.text }}</span>
    </div>
  </td>
</template>

<script>
export default {
  props: {
    text: String,
    value: Date,
    active: Boolean,
    highlight: Boolean,
    disabled: Boolean,
    start: Boolean,
    end: Boolean,
    additional: Boolean,
    now: Boolean,
    onClick: Function,
    onMouseEnter: { type: Function, default: () => {} }
  }
};
</script>
