<template>
  <UPageCard class="w-md bg-background-100">
    <div class="text-2xl font-title">{{ project.name }}</div>
    <p>
      {{ project.description }}
    </p>
    <div class="flex flex-row flex-wrap gap-2 items-baseline">
      <UiProjectLink v-for="link in project.links" :key="link.url" :link="link" />
    </div>
    <div class="flex flex-row gap-4 items-baseline">
      <div>Tools</div>
      <UiBadgeList :tools="project.tools" />
    </div>
  </UPageCard>
</template>

<script lang="ts" setup>
import type { Project } from '~/types/project';

const { project } = defineProps<{
  project: Project;
}>();
</script>
