components/SummaryCards.js

import { ArrowUpRight, ArrowDownRight, DollarSign } from 'lucide-react';

export default function SummaryCards({ income, expenses, profit }) {
  const formatCurrency = (amount) => {
    const formatted = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(amount);
    return amount >= 0 ? formatted : `-${formatted.replace('$', '')}`;
  };

  const profitMargin = income > 0 ? ((profit / income) * 100).toFixed(1) : 0;
  const isPositive = profit >= 0;

  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
      {/* Income Card */}
      <div className="stat-card animate-fadeIn">
        <div className="flex items-center justify-between mb-3">
          <div className="p-2 bg-income-light rounded-lg">
            <ArrowUpRight className="w-5 h-5 text-income-dark" />
          </div>
          <span className="text-xs font-medium text-income-dark bg-income-light px-2 py-1 rounded-full">
            Income
          </span>
        </div>
        <div className="stat-value text-income-dark">
          {formatCurrency(income)}
        </div>
        <div className="stat-label">Total income this period</div>
      </div>

      {/* Expenses Card */}
      <div className="stat-card animate-fadeIn" style={{ animationDelay: '0.1s' }}>
        <div className="flex items-center justify-between mb-3">
          <div className="p-2 bg-expense-light rounded-lg">
            <ArrowDownRight className="w-5 h-5 text-expense-dark" />
          </div>
          <span className="text-xs font-medium text-expense-dark bg-expense-light px-2 py-1 rounded-full">
            Expenses
          </span>
        </div>
        <div className="stat-value text-expense-dark">
          {formatCurrency(expenses)}
        </div>
        <div className="stat-label">Total expenses this period</div>
      </div>

      {/* Profit Card */}
      <div className="stat-card animate-fadeIn" style={{ animationDelay: '0.2s' }}>
        <div className="flex items-center justify-between mb-3">
          <div className={`p-2 rounded-lg ${isPositive ? 'bg-income-light' : 'bg-expense-light'}`}>
            <DollarSign className={`w-5 h-5 ${isPositive ? 'text-income-dark' : 'text-expense-dark'}`} />
          </div>
          <span className={`text-xs font-medium px-2 py-1 rounded-full ${
            isPositive ? 'text-income-dark bg-income-light' : 'text-expense-dark bg-expense-light'
          }`}>
            {isPositive ? 'Profit' : 'Loss'}
          </span>
        </div>
        <div className={`stat-value ${isPositive ? 'text-income-dark' : 'text-expense-dark'}`}>
          {formatCurrency(profit)}
        </div>
        <div className="stat-label">
          {profitMargin}% margin
        </div>
      </div>
    </div>
  );
}