sam-react-prod/src/components/business/CEODashboard/sections/CardManagementSection.tsx

'use client';

import { useRouter } from 'next/navigation';
import { CreditCard, Wallet, Receipt, AlertTriangle } from 'lucide-react';
import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
import type { CardManagementData } from '../types';

// 카드별 아이콘 매핑
const CARD_ICONS = [CreditCard, Wallet, Receipt, AlertTriangle];
const CARD_THEMES: SectionColorTheme[] = ['blue', 'indigo', 'purple', 'orange'];

interface CardManagementSectionProps {
  data: CardManagementData;
  onCardClick?: (cardId: string) => void;
}

export function CardManagementSection({ data, onCardClick }: CardManagementSectionProps) {
  const router = useRouter();

  const handleClick = (cardId: string) => {
    if (onCardClick) {
      onCardClick(cardId);
    } else {
      router.push('/ko/accounting/card-management');
    }
  };

  return (
    <CollapsibleDashboardCard
      icon={<CreditCard style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="카드/가지급금 관리"
      subtitle="카드 및 가지급금 현황"
    >
      {data.warningBanner && (
        <div className="bg-red-500 text-white text-sm font-medium px-4 py-2 rounded-lg mb-4 flex items-center gap-2">
          <AlertTriangle className="h-4 w-4" />
          {data.warningBanner}
        </div>
      )}

      <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
        {data.cards.map((card, idx) => (
          <AmountCardItem
            key={card.id}
            card={card}
            onClick={() => handleClick(card.id)}
            icon={CARD_ICONS[idx] || CreditCard}
            colorTheme={CARD_THEMES[idx] || 'blue'}
            showTrend={!!card.previousLabel}
            trendValue={card.previousLabel}
            trendDirection="up"
          />
        ))}
      </div>

      {data.checkPoints.length > 0 && (
        <div className="border-t pt-4 space-y-1">
          {data.checkPoints.map((cp) => (
            <CheckPointItem key={cp.id} checkpoint={cp} />
          ))}
        </div>
      )}
    </CollapsibleDashboardCard>
  );
}