<script setup lang="ts">
import { Card } from "@/components/ui/card";
import ServiceCategory from "@/enums/ServiceCategory";
import ServiceStatus from "@/enums/ServiceStatus";
import ServiceType from "@/enums/ServiceType";
import { DoorOpenIcon } from "lucide-vue-next";

withDefaults(
    defineProps<{
        icon?: object | Function;
        serviceType?: string;
        serviceCategory?: string;
        status?: string;
    }>(),
    {
        icon: () => DoorOpenIcon,
        serviceType: ServiceType.GATEWAY,
        serviceCategory: ServiceCategory.DATABASE,
        status: ServiceStatus.UNKNOWN,
    },
);
</script>
<template>
    <Card
        class="flex select-none items-center justify-between gap-4 bg-card/30 p-4 backdrop-blur-sm"
    >
        <div class="flex items-center gap-3">
            <component :is="icon" class="size-4 opacity-50" />
            <div>
                <div class="capitalize">{{ serviceCategory }}</div>
                <div class="text-xs opacity-50">{{ serviceType }}</div>
            </div>
        </div>
        <div class="flex items-center gap-1">
            <span
                class="inline-block size-1 rounded-full dark:bg-zinc-500"
                :class="{
                    'bg-zinc-500 dark:bg-zinc-400':
                        status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
                    'bg-green-600 dark:bg-green-400': status === ServiceStatus.RUNNING,
                    'bg-red-600 dark:bg-red-400': status === ServiceStatus.STOPPED,
                    'bg-yellow-600 dark:bg-yellow-400': status === ServiceStatus.INSTALLING,
                }"
            ></span>
            <span
                class="text-xs dark:text-zinc-400"
                :class="{
                    'text-zinc-600 dark:text-zinc-400':
                        status === ServiceStatus.UNKNOWN || status === ServiceStatus.NOT_INSTALLED,
                    'text-green-700 dark:text-green-400': status === ServiceStatus.RUNNING,
                    'text-red-700 dark:text-red-400': status === ServiceStatus.STOPPED,
                    'text-yellow-700 dark:text-yellow-400': status === ServiceStatus.INSTALLING,
                }"
                >{{ status.replaceAll("-", " ") }}</span
            >
        </div>
    </Card>
</template>
