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-center gap-2 py-[5px]">
          <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-center">
          {formatCurrency(totalBudget)}
        </p>
      </div>
      <div className="neuro-card w-full">
        <div className="flex items-center justify-center gap-2 py-[5px]">
          <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-center">
          {formatCurrency(totalExpense)}
        </p>
      </div>
      <div className="neuro-card w-full">
        <div className="flex items-center justify-center gap-2 py-[5px]">
          <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-center">
            초과액: {formatCurrency(Math.abs(remainingBudget))}
          </p>
        ) : (
          <p className="text-sm font-bold text-neuro-income text-center">
            {formatCurrency(remainingBudget)}
          </p>
        )}
      </div>
    </div>
  );
};

export default SummaryCards;