import { ReactNode } from 'react';
import clsx from 'clsx';

export type StatCardData = {
    label: string;          // e.g. "IN STOCK"
    value: ReactNode;        // e.g. 4 or "I" or any node
    subtitle?: string;       // e.g. "products"
    color?: 'green' | 'yellow' | 'red' | 'blue' | 'purple' | 'gray';
    icon?: ReactNode;
};

type Props = {
    stats: StatCardData[];
    columns?: 2 | 3 | 4 | 5;
};

const colorMap: Record<
    NonNullable<StatCardData['color']>,
    { bg: string; label: string; value: string }
> = {
    green: { bg: 'bg-emerald-50 border-emerald-100', label: 'text-emerald-600', value: 'text-emerald-900' },
    yellow: { bg: 'bg-amber-50 border-amber-100', label: 'text-amber-600', value: 'text-amber-900' },
    red: { bg: 'bg-rose-50 border-rose-100', label: 'text-rose-600', value: 'text-rose-900' },
    blue: { bg: 'bg-blue-50 border-blue-100', label: 'text-blue-600', value: 'text-blue-900' },
    purple: { bg: 'bg-violet-50 border-violet-100', label: 'text-violet-600', value: 'text-violet-900' },
    gray: { bg: 'bg-slate-50 border-slate-100', label: 'text-slate-600', value: 'text-slate-900' },
};

const colsMap: Record<NonNullable<Props['columns']>, string> = {
    2: 'sm:grid-cols-2',
    3: 'sm:grid-cols-2 lg:grid-cols-3',
    4: 'sm:grid-cols-2 lg:grid-cols-4',
    5: 'sm:grid-cols-2 lg:grid-cols-5',
};

const Shipments = ({ stats, columns = 3 }: Props) => {
    if (!stats?.length) return null;

    return (
        <div className={clsx('grid grid-cols-1 gap-4', colsMap[columns])}>
            {stats.map((stat, idx) => {
                const theme = colorMap[stat.color ?? 'gray'];
                return (
                    <div
                        key={idx}
                        className={clsx(
                            'rounded-xl border p-5 transition-shadow hover:shadow-sm',
                            theme.bg
                        )}
                    >
                        <div className="flex items-start justify-between">
                            <p className={clsx('text-xs font-semibold tracking-wide', theme.label)}>
                                {stat.label}
                            </p>
                            {stat.icon && <span className={theme.label}>{stat.icon}</span>}
                        </div>
                        <p className={clsx('mt-2 font-sans text-3xl font-bold', theme.value)}>
                            {stat.value}
                        </p>
                        {stat.subtitle && (
                            <p className="mt-1 text-sm text-slate-500">{stat.subtitle}</p>
                        )}
                    </div>
                );
            })}
        </div>
    );
};

export default Shipments;