<template>
  <div class="w-full flex flex-row justify-between items-center pt-3">
    <ts-header-text size="lg"> Upcoming sessions </ts-header-text>
    <div>
      <ts-normal-text color="text-primaryPurple">View all</ts-normal-text>
    </div>
  </div>

  <ts-calendar />

  <div class="w-full flex flex-row justify-between items-center pt-3">
    <ts-normal-text>Tuesday, June 3, 2022</ts-normal-text>
  </div>

  <div class="w-full flex flex-col space-y-3 pt-3">
    <ts-session-card
      :show-button="true"
      avatar-url="/images/avatar2.png"
      badge-color="green"
      card-linecolor="purple"
      :session-is-close="true"
    >
      <template v-slot:session-name> Cherokee Indians </template>
      <template v-slot:badge-text> Shared </template>
      <template v-slot:date> Today </template>
      <template v-slot:time> 11am - 12pm </template>
      <template v-slot:tutor-name> Micheal Connors </template>
      <template v-slot:button-text> Enter session </template>
    </ts-session-card>

    <ts-session-card
      :show-button="false"
      avatar-url="/images/tutor3.png"
      badge-color="purple"
      card-linecolor="yellow"
    >
      <template v-slot:session-name> Algebra </template>
      <template v-slot:badge-text> Private </template>
      <template v-slot:date> Today </template>
      <template v-slot:time> 11am - 12pm </template>
      <template v-slot:tutor-name> Jonathan Wilson </template>
    </ts-session-card>

    <ts-session-card
      :show-button="false"
      avatar-url="/images/tutor1.png"
      badge-color="purple"
      card-linecolor="yellow"
    >
      <template v-slot:session-name> Hydrocarbons </template>
      <template v-slot:badge-text> Private </template>
      <template v-slot:date> Today </template>
      <template v-slot:time> 11am - 12pm </template>
      <template v-slot:tutor-name> Saida Sinatra </template>
    </ts-session-card>
  </div>
</template>
<script lang="ts">
import TsHeaderText from "../TsTypography/headerText.vue";
import TsNormalText from "../TsTypography/normalText.vue";
import TsCalendar from "../TsCalendar/index.vue";
import TsSessionCard from "../TsSessionCard/index.vue";

export default {
  components: {
    TsHeaderText,
    TsNormalText,
    TsCalendar,
    TsSessionCard,
  },
  props: {},
  name: "TsCalendarBar",
};
</script>
