import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Zap, TrendingUp, Award, Sparkles } from 'lucide-react';
import { MeasurementDisplay } from '@/components/ui/measurement-display';

interface RideHighlight {
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
}

interface RideWithStats {
  id: string;
  name: string;
  max_speed_kmh?: number;
  max_height_meters?: number;
  inversions?: number;
  average_rating?: number;
}

interface RideHighlightsProps {
  ride: RideWithStats;
}

export function RideHighlights({ ride }: RideHighlightsProps) {
  const highlights: RideHighlight[] = [];

  // Add speed highlight if notable
  if (ride.max_speed_kmh && ride.max_speed_kmh > 60) {
    highlights.push({
      icon: <Zap className="w-5 h-5 text-amber-500" />,
      label: 'High Speed',
      value: <MeasurementDisplay value={ride.max_speed_kmh} type="speed" className="inline" />
    });
  }

  // Add height highlight if notable
  if (ride.max_height_meters && ride.max_height_meters > 30) {
    highlights.push({
      icon: <TrendingUp className="w-5 h-5 text-blue-500" />,
      label: 'Tall Structure',
      value: <MeasurementDisplay value={ride.max_height_meters} type="height" className="inline" />
    });
  }

  // Add inversions highlight
  if (ride.inversions && ride.inversions > 0) {
    highlights.push({
      icon: <Sparkles className="w-5 h-5 text-purple-500" />,
      label: 'Inversions',
      value: `${ride.inversions} ${ride.inversions === 1 ? 'inversion' : 'inversions'}`
    });
  }

  // Add rating highlight if high
  if (ride.average_rating && ride.average_rating >= 4.0) {
    highlights.push({
      icon: <Award className="w-5 h-5 text-yellow-500" />,
      label: 'Highly Rated',
      value: `${ride.average_rating.toFixed(1)} stars`
    });
  }

  if (highlights.length === 0) {
    return null;
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Ride Highlights</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {highlights.map((highlight, index) => (
            <div key={index} className="flex flex-col items-center text-center p-4 rounded-lg bg-accent/50">
              <div className="mb-2">{highlight.icon}</div>
              <div className="font-medium text-sm mb-1">{highlight.label}</div>
              <div className="text-xs text-muted-foreground">{highlight.value}</div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}