<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  logo: {
    type: String,
    required: true,
  },
  sectionLogo: {
    type: null as unknown as PropType<string | null>,
    default: null,
    required: false,
  },
  thumbnail: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    required: true,
  },
})

const sentence = computed(() => {
  return props.description.split('.').at(0) + '...'
})
</script>

<template>
  <div class="w-full h-full flex flex-col justify-end text-white relative">
    <img
      :src="thumbnail"
      :alt="alt"
      class="w-full h-full object-cover absolute top-0 left-0"
    />
    <div class="absolute top-0 left-0 p-5">
      <img :src="logo" alt="Logo" class="w-[100] h-[100]" />
    </div>
    <div v-if="sectionLogo" class="absolute top-0 right-0 p-5">
      <img :src="sectionLogo" alt="Logo" class="w-[100] h-[100]" />
    </div>

    <div class="mb-5 px-5" style="text-shadow: black 1px 1px 10px">
      <h1 class="m-0 text-[60px]">{{ title }}</h1>
      <strong class="min-h-[90px] m-0 text-[24px]" style="font-family: Lato">
        {{ sentence }}
      </strong>
    </div>
  </div>
</template>
