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

'use client';

import { useRouter } from 'next/navigation';
import { Banknote, CircleDollarSign, Building2, TrendingUp, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard, type SectionColorTheme } from '../components';
import type { ReceivableData } from '../types';

// 카드별 아이콘 매핑 (누적미수금, 당월미수금, 거래처, Top3)
const CARD_ICONS = [CircleDollarSign, Banknote, Building2, TrendingUp];
const CARD_THEMES: SectionColorTheme[] = ['amber', 'green', 'orange', 'red'];

interface ReceivableSectionProps {
  data: ReceivableData;
}

export function ReceivableSection({ data }: ReceivableSectionProps) {
  const router = useRouter();

  const handleDetailClick = () => {
    if (data.detailButtonPath) {
      router.push(data.detailButtonPath);
    }
  };

  return (
    <CollapsibleDashboardCard
      icon={<Banknote style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="미수금 현황"
      subtitle="미수금 관리 현황"
      rightElement={
        data.detailButtonLabel ? (
          <Button
            variant="ghost"
            size="sm"
            onClick={(e) => { e.stopPropagation(); handleDetailClick(); }}
            className="text-white hover:bg-white/10 gap-1 text-xs"
          >
            {data.detailButtonLabel}
            <ChevronRight className="h-3 w-3" />
          </Button>
        ) : undefined
      }
    >
      <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={handleDetailClick}
            icon={CARD_ICONS[idx] || Banknote}
            colorTheme={CARD_THEMES[idx] || 'amber'}
            showTrend={!!card.previousLabel}
            trendValue={card.previousLabel}
            trendDirection={idx === 3 ? 'down' : '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>
  );
}