'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 variant="glass">
        <CardHeader>
          <h3 className="text-lg font-semibold">
            📈 Évolution quotidienne des statuts
          </h3>
        </CardHeader>
        <CardContent>
          <DailyStatusChart data={metrics.dailyBreakdown} />
        </CardContent>
      </Card>

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