<template>
  <div
    :class="`w-full flex flex-col justify-start items-start space-y-3 pt-2 mdlg:!px-5 mdlg:!py-5 py-3 px-3 border-[1px] rounded ${customClass}`"
  >
    <ts-header-text :size="'base'"> Attachments </ts-header-text>

    <div class="w-full flex flex-row items-center justify-between">
      <div class="flex flex-row items-center space-x-2 flex-grow">
        <ts-icon name="file" customClass="mdlg:!h-[37px] h-[30px] " />
        <div class="flex flex-col mdlg:!space-y-[3px] space-y-[2px] items-start">
          <ts-normal-text> Concise Mathematics - Book 1.pdf </ts-normal-text>
          <ts-paragraph-text :faded="true" :customClass="'text-xs'">
            945 KB
          </ts-paragraph-text>
        </div>
      </div>

      <span
        class="mdlg:!py-3 mdlg:!px-3 px-2 py-2 rounded-full border-[1px] border-gray-200"
      >
        <ts-icon name="download" customClass="mdlg:h-[17px] h-[14px]" />
      </span>
    </div>
  </div>
</template>
<script lang="ts">
import TsHeaderText from "../TsTypography/headerText.vue";
import TsParagraphText from "../TsTypography/paragraphText.vue";
import TsIcon from "../TsIcon/index.vue";
import TsNormalText from "../TsTypography/normalText.vue";

export default {
  components: {
    TsHeaderText,
    TsParagraphText,
    TsIcon,
    TsNormalText,
  },
  props: {
    customClass: {
      type: String,
      default: "",
    },
  },
  name: "TsAttachmentList",
};
</script>
