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="font-bold text-neuro-income text-center mt-3 text-xs">
              {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="font-bold text-neuro-income text-center mt-3 text-xs">
              {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="font-bold text-neuro-income text-center mt-3 text-xs">
                {formatCurrency(remainingBudget)}
              </p>}
          </>}
      </div>
    </div>;
};
export default SummaryCards;