import React from 'react';
import { ArchiveBoxIcon } from '@heroicons/react/24/outline';
import StatCard from '../ui/StatCard';
import { formatNumber } from '../../lib/utils';
import type { InventoryStats } from '../../hooks/useInventory';

const ICON = <ArchiveBoxIcon style={{ width: 20, height: 20 }} />;

/** Four headline counters — order/colors mirror the tauri InventoryCards. */
export default function InventoryStatCards({ stats }: { stats: InventoryStats }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 20,
        padding: '20px 0',
      }}
    >
      <StatCard tone="violet" icon={ICON} label="تعداد کل کالاها"     value={formatNumber(stats.total)} />
      <StatCard tone="amber"  icon={ICON} label="کالاهای کم موجود"    value={formatNumber(stats.low)} />
      <StatCard tone="green"  icon={ICON} label="کالاهای موجود"       value={formatNumber(stats.inStock)} />
      <StatCard tone="pink"   icon={ICON} label="کالاهای اتمام یافته" value={formatNumber(stats.outOfStock)} />
    </div>
  );
}