<template>
  <button
    class=" bg-orange-200 m-4 p-4 rounded-full flex flex-shrink-0 items-center justify-center w-60 hover:text-xl hover:bg-orange-400 transition-all">
    <img v-if="project.image && project.image !== ''" class="h-16 rounded-full" :src="'/projects/' + project.image"
      :alt="project.company">
    <p class="grow text-center text-w font-bold text-md" v-if="!project.hideTitle">
      {{ project.company }}
    </p>
  </button>
</template>

<script setup lang="ts">
interface project {
  image: string,
  hideTitle?: boolean,
  url: string,
  year: string,
  company: string,
  role: string,
  description: string[],
  tools: string[]
}
const props = defineProps(['project'])
</script>
