<script setup lang="ts">
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { Component } from 'vue';

interface LowStockItem {
    name: string;
    stock: number;
    unit?: string;
}

interface Props {
    title: string;
    icon?: Component;
    iconColorClass?: string;
    items: LowStockItem[];
    emptyText: string;
    badgeColorClass?: string;
}

withDefaults(defineProps<Props>(), {
    iconColorClass: 'text-muted-foreground',
    badgeColorClass: 'border-yellow-500/20 bg-yellow-500/10 text-yellow-600',
});
</script>

<template>
    <Card>
        <CardHeader
            class="flex flex-row items-center justify-between space-y-0 pb-2"
        >
            <div>
                <CardTitle class="text-sm font-medium">{{ title }}</CardTitle>
            </div>
            <component
                v-if="icon"
                :is="icon"
                class="size-4"
                :class="iconColorClass"
            />
        </CardHeader>
        <CardContent>
            <div v-if="items.length > 0" class="space-y-2">
                <div
                    v-for="item in items"
                    :key="item.name"
                    class="flex items-center justify-between rounded-md border px-3 py-2"
                >
                    <span class="text-sm">{{ item.name }}</span>
                    <Badge variant="outline" :class="badgeColorClass">
                        {{ item.stock }} {{ item.unit || 'pcs' }}
                    </Badge>
                </div>
            </div>
            <div
                v-else
                class="flex h-[80px] items-center justify-center text-sm text-muted-foreground"
            >
                {{ emptyText }}
            </div>
        </CardContent>
    </Card>
</template>
