components/DashboardStats.jsx

import React from 'react';
import { TrendingUp, DollarSign, ShoppingBag, Users } from 'lucide-react';

const DashboardStats = ({ stats }) => {
  const statsData = [
    { 
      id: 'revenue', 
      icon: DollarSign, 
      label: 'รายได้รวม', 
      value: stats.revenue, 
      change: stats.revenueChange,
      color: 'bg-success/10 text-success'
    },
    { 
      id: 'sales', 
      icon: TrendingUp, 
      label: 'ยอดขาย', 
      value: `${stats.sales} รายการ`, 
      change: stats.salesChange,
      color: 'bg-primary-50 text-primary-600'
    },
    { 
      id: 'customers', 
      icon: Users, 
      label: 'ลูกค้า', 
      value: stats.customers, 
      change: stats.customerChange,
      color: 'bg-purple-50 text-purple-600'
    },
    { 
      id: 'orders', 
      icon: ShoppingBag, 
      label: 'คำสั่งซื้อ', 
      value: stats.orders, 
      change: stats.orderChange,
      color: 'bg-orange-50 text-orange-600'
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      {statsData.map((stat) => (
        <div key={stat.id} className="bg-white rounded-2xl border border-pos-border p-5 hover:shadow-lg transition-shadow duration-300">
          <div className="flex items-center justify-between mb-3">
            <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${stat.color}`}>
              <stat.icon className="w-5 h-5" />
            </div>
            <span className={`text-xs font-medium px-2 py-1 rounded-lg ${
              stat.change >= 0 
                ? 'bg-success/10 text-success' 
                : 'bg-danger/10 text-danger'
            }`}>
              {stat.change >= 0 ? '+' : ''}{stat.change}%
            </span>
          </div>
          <h3 className="text-sm text-pos-text-secondary mb-1">{stat.label}</h3>
          <p className="text-2xl font-bold text-pos-text">{stat.value}</p>
        </div>
      ))}
    </div>
  );
};

export default DashboardStats;