<template>
  <div
    :class="`py-4 px-2 flex flex-col space-y-2 border-[1px] border-gray-200 rounded ${customClass}`"
  >
    <div class="flex flex-row items-center justify-between px-4">
      <ts-icon name="chevron-left" custom-class="h-[14px]" />
      <ts-header-text size="lg"> June </ts-header-text>
      <ts-icon name="chevron-right" custom-class="h-[14px]" />
    </div>

    <div class="w-full flex flex-row items-center flex-wrap pt-2">
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> M </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> T </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> W </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> T </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> F </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> S </ts-header-text>
      <ts-header-text size="base" custom-class=" w-[14.2857142857%]"> S </ts-header-text>
    </div>

    <div class="w-full flex flex-row items-center flex-wrap">
      <ts-normal-text
        size="base"
        custom-class="py-[6px] px-[6px] flex flex-col items-center justify-center  w-[14.2857142857%]"
        v-for="(item, index) in [...Array(31).keys()]"
        :key="index"
      >
        <span
          :class="`cursor-pointer hover:bg-fadedBackground flex flex-row items-center justify-center rounded w-[29px] h-[27px] ${
            index == 2 ? '!text-white bg-primaryPurple' : 'text-paragraphText'
          }
		${index == 4 ? ' bg-fadedBackground' : 'text-paragraphText'} ${
            index == 13 ? 'bg-fadedBackground' : 'text-paragraphText'
          }
		${index == 14 ? ' bg-fadedBackground' : 'text-paragraphText'}
		${index == 18 ? ' bg-fadedBackground' : 'text-paragraphText'}
		${index == 29 ? ' bg-fadedBackground' : 'text-paragraphText'}`"
        >
          <span>
            {{ item + 1 }}
          </span>
        </span>
      </ts-normal-text>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import TsIcon from "../TsIcon/index.vue";
import TsHeaderText from "../TsTypography/headerText.vue";
import TsNormalText from "../TsTypography/normalText.vue";

export default defineComponent({
  components: {
    TsIcon,
    TsHeaderText,
    TsNormalText,
  },
  props: {
    bgColor: {
      type: String,
      default: "bg-primaryPurple",
    },
    customClass: {
      type: String,
      default: "w-full mt-4 col-span-full",
    },
  },
  name: "TsCalendar",
});
</script>
