
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">
        {isMobile ? (
          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
          <div className="flex items-center justify-between px-3 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">
              {formatCurrency(totalBudget)}
            </p>
          </div>
        ) : (
          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
          <>
            <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 mt-3">
              {formatCurrency(totalBudget)}
            </p>
          </>
        )}
      </div>
      <div className="neuro-card w-full">
        {isMobile ? (
          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
          <div className="flex items-center justify-between px-3 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">
              {formatCurrency(totalExpense)}
            </p>
          </div>
        ) : (
          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
          <>
            <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 mt-3">
              {formatCurrency(totalExpense)}
            </p>
          </>
        )}
      </div>
      <div className="neuro-card w-full">
        {isMobile ? (
          // 모바일 레이아웃 (1줄: 아이콘, 제목, 금액 가로배치)
          <div className="flex items-center justify-between px-3 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">
                초과액: {formatCurrency(Math.abs(remainingBudget))}
              </p>
            ) : (
              <p className="text-sm font-bold text-neuro-income">
                {formatCurrency(remainingBudget)}
              </p>
            )}
          </div>
        ) : (
          // 데스크탑 레이아웃 (2줄: 아이콘과 제목이 첫째 줄, 금액이 둘째 줄)
          <>
            <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 mt-3">
                초과액: {formatCurrency(Math.abs(remainingBudget))}
              </p>
            ) : (
              <p className="text-sm font-bold text-neuro-income text-center mt-3">
                {formatCurrency(remainingBudget)}
              </p>
            )}
          </>
        )}
      </div>
    </div>
  );
};

export default SummaryCards;
