'use client';

import { Heart, Gift, Coffee, Smile } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { SectionTitle, AmountCardItem, CheckPointItem, type SectionColorTheme } from '../components';
import type { WelfareData } from '../types';

// 카드별 아이콘 매핑
const CARD_ICONS = [Heart, Gift, Coffee, Smile];
const CARD_THEMES: SectionColorTheme[] = ['emerald', 'green', 'cyan', 'blue'];

interface WelfareSectionProps {
  data: WelfareData;
  onCardClick?: (cardId: string) => void;
}

export function WelfareSection({ data, onCardClick }: WelfareSectionProps) {
  return (
    <Card>
      <CardContent className="p-6">
        <SectionTitle
          title="복리후생비 현황"
          badge="info"
          icon={Heart}
          colorTheme="emerald"
        />

        <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={onCardClick ? () => onCardClick(card.id) : undefined}
              icon={CARD_ICONS[idx] || Heart}
              colorTheme={CARD_THEMES[idx] || 'emerald'}
              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>
        )}
      </CardContent>
    </Card>
  );
}