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'], string> = {
    primary: 'bg-primary/10 text-primary',
    secondary: 'bg-secondary/10 text-secondary',
    info: 'bg-info/10 text-info',
    warning: 'bg-warning/10 text-warning',
    success: 'bg-success/10 text-success',
    danger: 'bg-danger/10 text-danger',
};

type StatCardProps = {
    card: DashboardSummaryCard;
};

export function StatCard({ card }: StatCardProps) {
    return (
        <div className="col-span-12 sm:col-span-6 xl:col-span-3">
            <Link href={card.href} className="box overflow-hidden block h-full hover:shadow-md transition-shadow">
                <div className="box-body">
                    <div className="flex items-start gap-3">
                        <div className={`avatar p-2 rounded-sm ${toneClasses[card.tone]}`}>
                            <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-xl font-semibold leading-tight break-words">
                                {card.value}
                            </AdminTextHeading>
                            <AdminTextMuted className="mt-1 text-xs">{card.hint}</AdminTextMuted>
                        </div>
                    </div>
                </div>
            </Link>
        </div>
    );
}