'use client';

import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { SectionTitle, AmountCardItem, CheckPointItem } from '../components';
import type { DebtCollectionData } from '../types';

interface DebtCollectionSectionProps {
  data: DebtCollectionData;
}

export function DebtCollectionSection({ data }: DebtCollectionSectionProps) {
  const router = useRouter();

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

  return (
    <Card>
      <CardContent className="p-6">
        <SectionTitle title="채권추심 현황" badge="info" />

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
          {data.cards.map((card) => (
            <AmountCardItem
              key={card.id}
              card={card}
              onClick={data.detailButtonPath ? handleClick : undefined}
            />
          ))}
        </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>
  );
}