import StatCard from '@/components/admin/StatCard';
import type { DashboardStats } from '@/types/admin';
import { Activity, Building2, CreditCard, Globe } from 'lucide-react';

export default function KpiCards({ stats }: { stats: DashboardStats }) {
    return (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <StatCard
                label="Total Tenants"
                value={stats.total_tenants.toLocaleString()}
                sub={stats.total_tenants_growth}
                icon={Building2}
                iconColor="bg-primary/25 text-primary dark:bg-primary/20 dark:text-primary"
                trend={stats.tenants_trend?.value}
                positive={stats.tenants_trend?.positive}
            />
            <StatCard
                label="Monthly Recurring Revenue"
                value={stats.mrr}
                sub="Across all active plans"
                icon={CreditCard}
                iconColor="bg-amber-400/25 text-amber-600 dark:bg-amber-400/15 dark:text-amber-400"
                trend={stats.mrr_trend?.value}
                positive={stats.mrr_trend?.positive}
            />
            <StatCard
                label="Active Subscriptions"
                value={stats.active_subscriptions.toLocaleString()}
                sub={`${stats.subscription_rate} of all tenants`}
                icon={Globe}
                iconColor="bg-sky-400/25 text-sky-600 dark:bg-sky-400/15 dark:text-sky-400"
                trend={stats.subs_trend?.value}
                positive={stats.subs_trend?.positive}
            />
            <StatCard
                label="Trial → Paid Conversion"
                value={stats.trial_conversion}
                sub={stats.trial_conversion_label}
                icon={Activity}
                iconColor="bg-emerald-400/25 text-emerald-600 dark:bg-emerald-400/15 dark:text-emerald-400"
            />
        </div>
    );
}