'use client';

import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { DailyStatusChart } from './DailyStatusChart';
import { CompletionRateChart } from './CompletionRateChart';
import { WeeklyMetrics } from '@/hooks/use-metrics';

interface MetricsMainChartsProps {
  metrics: WeeklyMetrics;
}

export function MetricsMainCharts({ metrics }: MetricsMainChartsProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <Card>
        <CardHeader>
          <h3 className="text-lg font-semibold">📈 Évolution quotidienne des statuts</h3>
        </CardHeader>
        <CardContent>
          <DailyStatusChart data={metrics.dailyBreakdown} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <h3 className="text-lg font-semibold">🎯 Taux de completion quotidien</h3>
        </CardHeader>
        <CardContent>
          <CompletionRateChart data={metrics.dailyBreakdown} />
        </CardContent>
      </Card>
    </div>
  );
}