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

export function ParkDetailSkeleton() {
  return (
    <div className="container mx-auto px-4 py-8 max-w-7xl animate-pulse">
      {/* Breadcrumb */}
      <div className="h-4 bg-muted rounded w-48 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 Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 max-w-6xl mx-auto">
        {[1, 2, 3, 4].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="h-8 bg-muted rounded w-16 mx-auto mb-2" />
              <div className="h-3 bg-muted rounded w-20 mx-auto" />
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Tabs */}
      <div className="flex gap-2 border-b mb-6">
        {['Overview', 'Rides', '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>
            <CardHeader>
              <div className="h-6 bg-muted rounded w-48" />
            </CardHeader>
            <CardContent className="space-y-3">
              <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-3/4" />
            </CardContent>
          </Card>

          {/* Featured Rides Card */}
          <Card>
            <CardHeader>
              <div className="h-6 bg-muted rounded w-40" />
            </CardHeader>
            <CardContent>
              <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="space-y-2">
                    <div className="aspect-square bg-muted rounded-lg" />
                    <div className="h-4 bg-muted rounded w-full" />
                    <div className="h-3 bg-muted rounded w-3/4" />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Info Card */}
          <Card>
            <CardHeader>
              <div className="h-6 bg-muted rounded w-40" />
            </CardHeader>
            <CardContent className="space-y-4">
              {[1, 2, 3, 4].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-24 mb-1" />
                    <div className="h-3 bg-muted rounded w-32" />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Map Card */}
          <Card>
            <CardContent className="p-0">
              <div className="aspect-square bg-muted rounded-lg" />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}