<template>
  <div
    v-if="data"
    class="w-full col-span-full border-[1px] px-3 py-3 rounded cursor-pointer border-gray-200 flex flex-row items-center space-x-2"
  >
    <div class="flex flex-col space-y-1 w-full">
      <div class="flex flex-row justify-between w-full items-center">
        <div class="flex flex-row items-center space-x-2">
          <ts-paragraph-text :faded="true" :customClass="'text-xs'">
            <slot name="subject" />
          </ts-paragraph-text>
          <span
            class="h-[4px] w-[4px] bg-paragraphTextLight rounded-full"
          ></span>
          <ts-paragraph-text :faded="true" :customClass="'text-xs'">
            <slot name="past-time" />
          </ts-paragraph-text>
          <span
            class="h-[4px] w-[4px] bg-paragraphTextLight rounded-full"
          ></span>
          <ts-paragraph-text :faded="true" :customClass="'text-xs capitalize'">
            {{ status }}
          </ts-paragraph-text>
        </div>
        <slot name="time" />
      </div>
      <ts-paragraph-text :customClass="'text-left line-clamp-3'">
        <slot name="content" />
      </ts-paragraph-text>
      <slot name="extra" />
    </div>
    <ts-video :customClass="'h-full w-[100px]'" v-if="status == 'answered'" />
  </div>
</template>
<script lang="ts">
import TsParagraphText from "../TsTypography/paragraphText.vue";
import TsVideo from "../TsVideo/index.vue";
import { Question } from "tutorstack-frontend-logic";

export default {
  components: {
    TsParagraphText,
    TsVideo,
  },
  props: {
    bgColor: {
      type: String,
      default: "bg-primaryPurple",
    },
    data: {
      type: Object as () => Question,
    },
    textColor: {
      type: String,
      default: "text-white",
    },
    customClass: {
      type: String,
      default: "",
    },
    padding: {
      type: String,
      default: "py-2 px-4 ",
    },
    status: {
      type: String,
      default: "answered",
    },
  },
  name: "TsQuestionCard",
};
</script>
