<?php
/**
 * Stats card component — with Lucide icon support, animated counters, and hover effects.
 *
 * @var string $title
 * @var string $value
 * @var string $icon     Lucide icon name (e.g. 'users', 'banknote', 'trending-up')
 * @var string $color    (primary|success|danger|warning)
 * @var string $link     (optional)
 * @var string $change   (optional, e.g. "+5%")
 */
$color = $color ?? 'primary';
$iconName = $icon ?? 'bar-chart-3';
$numericValue = (string)($value ?? '0');
$isNumeric = is_numeric(str_replace([',', ' '], '', $numericValue));
?>
<div class="stats-card stats-card-<?= e($color) ?>">
    <div class="stats-card-icon">
        <i data-lucide="<?= e($iconName) ?>"></i>
    </div>
    <div class="stats-card-content">
        <div class="stats-card-title"><?= e($title ?? '') ?></div>
        <div class="stats-card-value" <?= $isNumeric ? 'data-count="' . e(str_replace([',', ' '], '', $numericValue)) . '"' : '' ?>><?= e($numericValue) ?></div>
        <?php if (!empty($change)): ?>
            <div class="stats-card-change <?= str_starts_with($change, '+') ? 'positive' : (str_starts_with($change, '-') ? 'negative' : '') ?>">
                <?php if (str_starts_with($change, '+')): ?>
                    <i data-lucide="trending-up" style="width:14px;height:14px;"></i>
                <?php elseif (str_starts_with($change, '-')): ?>
                    <i data-lucide="trending-down" style="width:14px;height:14px;"></i>
                <?php endif; ?>
                <?= e($change) ?>
            </div>
        <?php endif; ?>
    </div>
    <?php if (!empty($link)): ?>
        <a href="<?= e($link) ?>" class="stats-card-link">
            عرض الكل
            <i data-lucide="arrow-left" style="width:14px;height:14px;display:inline;vertical-align:middle;"></i>
        </a>
    <?php endif; ?>
</div>
