import { Card, CardContent } from '@/components/ui/card';

export function RideDetailSkeleton() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-7xl animate-pulse">
      {/* Breadcrumb */}
      <div className="h-4 bg-muted rounded w-64 mb-4" />
      
      {/* Edit Button Area */}
      <div className="flex justify-end mb-6">
        <div className="h-10 bg-muted rounded w-32" />
      </div>

      {/* Hero Banner */}
      <div className="aspect-[21/9] bg-muted rounded-lg mb-8" />

      {/* Stats Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-12">
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <Card key={i} className="border-0 bg-gradient-to-br from-muted/50 to-muted/30">
            <CardContent className="p-4 text-center">
              <div className="w-6 h-6 bg-muted rounded mx-auto mb-2" />
              <div className="h-8 bg-muted rounded w-16 mx-auto mb-1" />
              <div className="h-3 bg-muted rounded w-12 mx-auto" />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Tabs */}
      <div className="flex gap-2 border-b mb-6">
        {['Overview', 'Reviews', 'Photos', 'History'].map((tab) => (
          <div key={tab} className="h-10 bg-muted rounded w-24" />
        ))}
      </div>

      {/* Content Grid */}
      <div className="grid lg:grid-cols-3 gap-6">
        {/* Main Content */}
        <div className="lg:col-span-2 space-y-6">
          {/* Description Card */}
          <Card>
            <CardContent className="p-6 space-y-3">
              <div className="h-6 bg-muted rounded w-48 mb-4" />
              <div className="h-4 bg-muted rounded w-full" />
              <div className="h-4 bg-muted rounded w-full" />
              <div className="h-4 bg-muted rounded w-5/6" />
            </CardContent>
          </Card>

          {/* Technical Specs */}
          <Card>
            <CardContent className="p-6 space-y-4">
              <div className="h-6 bg-muted rounded w-56 mb-4" />
              <div className="grid grid-cols-2 gap-4">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <div key={i} className="space-y-2">
                    <div className="h-3 bg-muted rounded w-24" />
                    <div className="h-5 bg-muted rounded w-32" />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Ride Info Card */}
          <Card>
            <CardContent className="p-6 space-y-4">
              <div className="h-6 bg-muted rounded w-40 mb-4" />
              {[1, 2, 3, 4, 5].map((i) => (
                <div key={i} className="flex items-center gap-3">
                  <div className="w-4 h-4 bg-muted rounded" />
                  <div className="flex-1">
                    <div className="h-4 bg-muted rounded w-20 mb-1" />
                    <div className="h-3 bg-muted rounded w-28" />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Similar Rides */}
          <Card>
            <CardContent className="p-6">
              <div className="h-6 bg-muted rounded w-32 mb-4" />
              <div className="space-y-3">
                {[1, 2, 3].map((i) => (
                  <div key={i} className="flex gap-3">
                    <div className="w-16 h-16 bg-muted rounded" />
                    <div className="flex-1 space-y-2">
                      <div className="h-4 bg-muted rounded w-full" />
                      <div className="h-3 bg-muted rounded w-3/4" />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}