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

'use client';

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

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

export function DailyReportSection({ data, onClick }: DailyReportSectionProps) {
  return (
    <Card
      className={onClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''}
      onClick={onClick}
    >
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <SectionTitle title="일일 일보" badge="info" />
          <span className="text-sm text-muted-foreground">{data.date}</span>
        </div>

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