'use client';

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

interface MetricsDistributionChartsProps {
  metrics: WeeklyMetrics;
}

export function MetricsDistributionCharts({
  metrics,
}: MetricsDistributionChartsProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <Card variant="glass">
        <CardHeader>
          <h3 className="text-lg font-semibold">🍰 Répartition des statuts</h3>
        </CardHeader>
        <CardContent>
          <StatusDistributionChart data={metrics.statusDistribution} />
        </CardContent>
      </Card>

      <Card variant="glass">
        <CardHeader>
          <h3 className="text-lg font-semibold">⚡ Performance par priorité</h3>
        </CardHeader>
        <CardContent>
          <PriorityBreakdownChart data={metrics.priorityBreakdown} />
        </CardContent>
      </Card>

      <Card variant="glass">
        <CardHeader>
          <h3 className="text-lg font-semibold">🔥 Heatmap d&apos;activité</h3>
        </CardHeader>
        <CardContent>
          <WeeklyActivityHeatmap data={metrics.dailyBreakdown} />
        </CardContent>
      </Card>
    </div>
  );
}
