<template>
  <div class="project">
    <div class="project__image project__image--left" v-if="variant === 'left'">
      <a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
    </div>

    <div class="project__infobox">
      <div class="project__info-title">
        <h2>
          <a :href="href" target="_blank">{{ title }}</a>
        </h2>
      </div>
      <div class="project__info-body">
        <slot></slot>
      </div>
    </div>

    <div
      class="project__image project__image--right"
      v-if="variant === 'right'"
    >
      <a :href="image" target="_blank"><img :src="thumb" :alt="title" /></a>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  variant: 'left' | 'right';
  title: string;
  href: string;
  image: string;
}>();

const thumb = computed(() => {
  const split = props.image.split('/');
  const last = split.length - 1;
  split[last] = `thumb_${split[last]}`;
  return split.join('/');
});
</script>
