import { AdminTextHeading, AdminTextMuted } from '@admin/components/ui/admin-theme-text';
import type { DashboardSummaryCard } from '@admin/types/dashboard';
import { Link } from '@inertiajs/react';

const toneClasses: Record<DashboardSummaryCard['tone'], { avatar: string; badge: string }> = {
    primary: { avatar: 'bg-primary/10 text-primary', badge: 'bg-primary/10 text-primary' },
    secondary: { avatar: 'bg-secondary/10 text-secondary', badge: 'bg-secondary/10 text-secondary' },
    info: { avatar: 'bg-info/10 text-info', badge: 'bg-info/10 text-info' },
    warning: { avatar: 'bg-warning/10 text-warning', badge: 'bg-warning/10 text-warning' },
    success: { avatar: 'bg-success/10 text-success', badge: 'bg-success/10 text-success' },
};

type StatCardProps = {
    card: DashboardSummaryCard;
};

export function StatCard({ card }: StatCardProps) {
    const tone = toneClasses[card.tone];
    const badgeLabel =
        card.active === null
            ? 'Total'
            : card.key === 'messages'
              ? `${card.active} unread`
              : `${card.active} active`;

    return (
        <div className="col-span-12 sm:col-span-6 lg:col-span-3">
            <Link href={card.href} className="box overflow-hidden block hover:shadow-md transition-shadow">
                <div className="box-body">
                    <div className="flex items-start gap-3">
                        <div className={`avatar p-2 rounded-sm ${tone.avatar}`}>
                            <i className={`${card.icon} text-xl`} />
                        </div>
                        <div className="min-w-0 flex-1">
                            <AdminTextMuted className="text-sm mb-1">{card.label}</AdminTextMuted>
                            <AdminTextHeading as="h3" className="text-2xl font-semibold">
                                {card.total}
                            </AdminTextHeading>
                        </div>
                        <span className={`badge py-1 ${tone.badge}`}>{badgeLabel}</span>
                    </div>
                </div>
            </Link>
        </div>
    );
}