<!-- eslint-disable vue/no-v-html -->
<template>
  <component
    :is="platformIcons[props.platform as HardwarePlatform]"
    v-if="platformIcons[props.platform as HardwarePlatform]"
  />
  <div v-else-if="props.fallback" v-html="props.fallback" />
  <DropLogo v-else />
</template>

<script setup lang="ts">
import { HardwarePlatform } from "~~/prisma/client/enums";
import type { Component } from "vue";
import LinuxLogo from "./LinuxLogo.vue";
import WindowsLogo from "./WindowsLogo.vue";
import MacLogo from "./MacLogo.vue";
import DropLogo from "../DropLogo.vue";

const props = defineProps<{ platform: string; fallback?: string | undefined }>();

const platformIcons: { [key in HardwarePlatform]: Component } = {
  [HardwarePlatform.Linux]: LinuxLogo,
  [HardwarePlatform.Windows]: WindowsLogo,
  [HardwarePlatform.macOS]: MacLogo,
};
</script>
