<script setup>
import PencilIcon from '@/components/icons/PencilIcon.vue'

defineProps({
  profile: Boolean
})
import PlusIcon from '@/components/icons/PlusIcon.vue'
</script>

<template>
<BaseCard class="border w-full max-w-screen-xl py-2 px-4 flex gap-4 relative" plain>
  <img src="@/assets/pfp1.jpeg" alt="Profile photo" class="h-20 shrink-0 rounded-md overflow-hidden">
  <div class="flex flex-col gap-2">
    <div class="flex w-full flex-col sm:flex-row sm:items-center self-start sm:gap-4">
      <h3 class="font-bold text-xl">Jinx the Car</h3>
      <h4><span class="font-bold">3</span> years old</h4>
      <h4>from <span class="font-bold">Latvia</span></h4>
    </div>
    <div class="flex gap-2 flex-wrap">
      <h4 class="bg-pink-200 rounded-md px-2 py-0.5">Fishing</h4>
      <h4 class="bg-pink-200 rounded-md px-2 py-0.5">Hiking</h4>
      <h4 class="bg-pink-200 rounded-md px-2 py-0.5">Something</h4>
    </div>
    <PlusIcon v-if="!profile" class="h-8 absolute top-2 right-2 rotate-45 text-pink-700"/>

  </div>
</BaseCard>
</template>

<style scoped>

</style>