<template>
  <span :class="badgeClass"><i :class="iconClass"></i> {{ platform }}</span>
</template>

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

const props = defineProps<{ platform: string }>()

const knownPlatforms = ['tic80', 'ebitengine', 'love', 'godot']

const platformIcons: Record<string, string> = {
  tic80: 'fa-solid fa-tv',
  ebitengine: 'fa-brands fa-golang',
  love: 'fa-solid fa-heart',
  godot: 'fa-solid fa-robot',
  other: 'fa-solid fa-cube',
}

const platformKey = computed(() => {
  const key = props.platform.toLowerCase().replace(/[^a-z0-9]/g, '')
  return knownPlatforms.includes(key) ? key : 'other'
})

const badgeClass = computed(() => `platform-badge platform-${platformKey.value}`)
const iconClass = computed(() => platformIcons[platformKey.value])
</script>

<style scoped>
.platform-badge {
  @apply px-2 py-0.5 rounded text-xs font-bold uppercase;
}
.platform-tic80 { @apply bg-cyan-100 text-cyan-800 border border-cyan-200; }
.platform-ebitengine { @apply bg-red-100 text-red-800 border border-red-200; }
.platform-love { @apply bg-pink-100 text-pink-800 border border-pink-200; }
.platform-godot { @apply bg-sky-100 text-sky-800 border border-sky-200; }
.platform-other { @apply bg-purple-100 text-purple-800 border border-purple-200; }
</style>
