'use client';

import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { VelocityTrendChart } from './VelocityTrendChart';
import { VelocityTrend } from '@/hooks/use-metrics';

interface MetricsVelocitySectionProps {
  trends: VelocityTrend[];
  trendsLoading: boolean;
  weeksBack: number;
  onWeeksBackChange: (weeks: number) => void;
}

export function MetricsVelocitySection({
  trends,
  trendsLoading,
  weeksBack,
  onWeeksBackChange,
}: MetricsVelocitySectionProps) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold">🚀 Tendances de vélocité</h3>
          <select
            value={weeksBack}
            onChange={(e) => onWeeksBackChange(parseInt(e.target.value))}
            className="text-sm border border-[var(--border)] rounded px-2 py-1 bg-[var(--background)]"
            disabled={trendsLoading}
          >
            <option value={4}>4 semaines</option>
            <option value={8}>8 semaines</option>
            <option value={12}>12 semaines</option>
          </select>
        </div>
      </CardHeader>
      <CardContent>
        {trendsLoading ? (
          <div className="h-[300px] flex items-center justify-center">
            <div className="animate-pulse text-center">
              <div className="h-4 bg-[var(--border)] rounded w-32 mx-auto mb-2"></div>
              <div className="h-48 bg-[var(--border)] rounded"></div>
            </div>
          </div>
        ) : trends.length > 0 ? (
          <VelocityTrendChart data={trends} />
        ) : (
          <div className="h-[300px] flex items-center justify-center text-[var(--muted-foreground)]">
            Aucune donnée de vélocité disponible
          </div>
        )}
      </CardContent>
    </Card>
  );
}
