'use client';

import { FileText } from 'lucide-react';
import { AmountCardItem, CheckPointItem, CollapsibleDashboardCard } from '../components';
import type { DailyReportData } from '../types';

interface DailyReportSectionProps {
  data: DailyReportData;
  onClick?: () => void;
}

export function DailyReportSection({ data, onClick }: DailyReportSectionProps) {
  return (
    <CollapsibleDashboardCard
      icon={<FileText style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="일일 일보"
      subtitle={data.date}
    >
      <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) => (
          <AmountCardItem key={card.id} card={card} onClick={onClick} />
        ))}
      </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>
  );
}
