zellyy-finance/src/components/analytics/SummaryCards.tsx

import React from 'react';
import { Wallet, CreditCard, Coins } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';
import { useIsMobile } from '@/hooks/use-mobile';

interface SummaryCardsProps {
  totalBudget: number;
  totalExpense: number;
  savingsPercentage: number;
}

const SummaryCards: React.FC<SummaryCardsProps> = ({
  totalBudget,
  totalExpense,
  savingsPercentage
}) => {
  const isMobile = useIsMobile();
  
  // 남은 예산 계산
  const remainingBudget = totalBudget - totalExpense;
  const isOverBudget = remainingBudget < 0;

  return (
    <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
      <div className="neuro-card w-full">
        <div className="flex items-center justify-between py-[5px]">
          <div className="flex items-center gap-2">
            <Wallet size={24} className="text-gray-500" />
            <p className="text-gray-500 text-base">예산</p>
          </div>
          <p className="text-sm font-bold text-neuro-income text-right">
            {formatCurrency(totalBudget)}
          </p>
        </div>
      </div>
      <div className="neuro-card w-full">
        <div className="flex items-center justify-between py-[5px]">
          <div className="flex items-center gap-2">
            <CreditCard size={24} className="text-gray-500" />
            <p className="text-gray-500 font-medium text-base">지출</p>
          </div>
          <p className="text-sm font-bold text-neuro-income text-right">
            {formatCurrency(totalExpense)}
          </p>
        </div>
      </div>
      <div className="neuro-card w-full">
        <div className="flex items-center justify-between py-[5px]">
          <div className="flex items-center gap-2">
            <Coins size={24} className="text-gray-500" />
            <p className="text-gray-500 text-base">잔액</p>
          </div>
          {isOverBudget ? (
            <p className="text-sm font-bold text-red-500 text-right">
              초과액: {formatCurrency(Math.abs(remainingBudget))}
            </p>
          ) : (
            <p className="text-sm font-bold text-neuro-income text-right">
              {formatCurrency(remainingBudget)}
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default SummaryCards;