import type { ElementType } from 'react';

import { Card, CardContent } from '@/components/ui/card';

type StatisticCardSmallProps = {
    title: string;
    value: string | number;
    icon: ElementType;
    iconBg?: string;
    iconColor?: string;
};

export default function StatisticCardSmall({
    title,
    value,
    icon: Icon,
    iconColor,
}: StatisticCardSmallProps) {
    const resolvedIconColor = iconColor ?? 'text-[#008060]';

    return (
        <Card className="border-[#d8d8d8] shadow-sm">
            <CardContent className="p-4">
                <div className="flex items-center justify-between">
                    <div>
                        <p className="text-xs tracking-wide text-[#6d7175] uppercase">{title}</p>
                        <p className="mt-1 text-base font-semibold text-[#202223]">{value}</p>
                    </div>
                    <div className="rounded-lg border border-[#d8d8d8] bg-white p-2">
                        <Icon className={`h-5 w-5 ${resolvedIconColor}`} />
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}