<script setup lang="ts">
interface Props {
  logo: string;
  href?: string;
  company: string;
  role: string;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="flex gap-5">
    <NuxtLink :to="props.href" target="_blank" class="block">
      <NuxtImg
        placeholder
        :src="props.logo"
        :alt="props.company"
        class="block rounded min-w-[50px]"
        format="webp"
        height="50"
        width="50"
        fit="outside"
      />
    </NuxtLink>
    <div class="flex flex-col justify-center">
      <NuxtLink
        :href="props.href"
        target="_blank"
        class="md:text-xl text-lg font-semibold hover:underline hover:underline-offset-4"
      >
        {{ props.company }}
      </NuxtLink>
      <div class="mb-2 text-xs text-gray-500 uppercase font-bold">
        {{ props.role }}
      </div>
      <div class="text-sm text-gray-500">
        <slot />
      </div>
    </div>
  </div>
</template>
