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

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>
