<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  name: string
  url: string
  tags?: string[]
}>()
const sortedTags = computed(() => (!props.tags ? null : props.tags.slice().sort()))

const COMMON_TAGS: Record<string, string[]> = {
  Java: ['white', '#e76f00'],
  Vue: ['white', '#41b883'],
  Dlang: ['white', '#b03931'],
  Typescript: ['white', '#3178c6'],
  Finance: ['white', '#0e4f0a'],
  Spring: ['white', '#6db33f']
}

function getTagStyle(tag: string) {
  if (tag in COMMON_TAGS) {
    return { color: COMMON_TAGS[tag][0], 'background-color': COMMON_TAGS[tag][1] }
  }
  return {
    color: 'white',
    'background-color': 'gray'
  }
}
</script>

<template>
  <div class="software-project-tile">
    <h3><a :href="url" v-text="name" class="link-out"></a></h3>
    <div class="software-project-tile-content">
      <slot></slot>
    </div>
    <div v-if="tags">
      <span
        v-for="tag in sortedTags"
        :key="tag"
        v-text="tag"
        class="software-project-tile-tag-badge"
        :style="getTagStyle(tag)"
      ></span>
    </div>
  </div>
</template>

<style>
.software-project-tile {
  background-color: var(--background-color-2);
  border-radius: 20px;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.software-project-tile > h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: x-large;
}

.software-project-tile-content > p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  font-size: 14px;
}

.software-project-tile-tag-badge {
  font-size: 12px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  border-radius: 10px;
  margin-right: 0.5rem;
}
</style>
