import { useState } from 'react';
import { Check, X, Star, Shield, Clock, Smartphone, Download, QrCode, Heart, Users, Award, Headphones } from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { RadioGroup, RadioGroupItem } from './ui/radio-group';
import { Badge } from './ui/badge';
import Navbar from './Navbar';
import { CitySubmenu } from './CitySubmenu';
import { EnhancedTestimonials } from './EnhancedTestimonials';
import { Footer } from './Footer';
import { ReviewsSection } from './ReviewsSection';

interface PassesPageProps {
  onBackClick: () => void;
  onHomeClick: () => void;
  onMelbourneClick: () => void;
  onPassesClick: () => void;
  onCheckoutClick?: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  onAttractionsClick: () => void;
  onBlogsClick: () => void;
  onHowItWorksClick: () => void;
  onFAQClick: () => void;
  onPrivacyPolicyClick: () => void;
  onAboutUsClick?: () => void;
  onProfileClick?: () => void;
  onCityCardsClick: () => void;
  onMagicItineraryClick: () => void;
  onPostCardsClick: () => void;
  onOffersClick: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  onContactUsClick?: () => void;
  currentPage: string;
  user?: { email: string; name: string; } | null;
}

interface PassType {
  id: string;
  name: string;
  title: string;
  description: string;
  price: string;
  originalPrice?: string;
  period: string;
  popular?: boolean;
  features: string[];
  tableFeatures: {
    freeDelivery: boolean | string;
    attractionsIncluded: string;
    validityPeriod: string;
    audioGuide: boolean;
    skipTheLine: boolean | string;
    mobileApp: boolean;
    cancellationPolicy: string;
    customerSupport: string;
    additionalPerks: string;
  };
}

const passTypes: PassType[] = [
  {
    id: 'selective',
    name: 'Selective Pass',
    title: 'SELECTIVE PASS',
    description: 'Perfect for travelers who want to explore selected attractions at their own pace with essential features.',
    price: '$59.99',
    originalPrice: '$89.99',
    period: 'per person',
    features: [
      'Access to selected attractions',
      'Limited number of attractions per pass',
      'Flexible validity period',
      'Priority entry where available',
      'Mobile ticket delivery'
    ],
    tableFeatures: {
      freeDelivery: true,
      attractionsIncluded: 'Up to 5 attractions',
      validityPeriod: '30 days',
      audioGuide: false,
      skipTheLine: 'Selected venues',
      mobileApp: true,
      cancellationPolicy: '24 hours free cancellation',
      customerSupport: 'Email support',
      additionalPerks: 'Basic travel tips'
    }
  },
  {
    id: 'unlimited',
    name: 'Unlimited Pass',
    title: 'UNLIMITED CARD',
    description: 'The ultimate experience for adventure seekers who want unlimited access to all attractions with premium features.',
    price: '$89.99',
    originalPrice: '$149.99',
    period: 'per person',
    popular: true,
    features: [
      'Unlimited access to all attractions',
      'Time-limited validity (7 days)',
      'Skip-the-line access',
      'Expert guide inclusion',
      'Mobile app access',
      'Premium customer support'
    ],
    tableFeatures: {
      freeDelivery: true,
      attractionsIncluded: 'All attractions (50+)',
      validityPeriod: '7 consecutive days',
      audioGuide: true,
      skipTheLine: 'All venues',
      mobileApp: true,
      cancellationPolicy: '24 hours free cancellation',
      customerSupport: '24/7 Phone & Email',
      additionalPerks: 'Exclusive discounts & priority booking'
    }
  }
];

const featureComparison = [
  { key: 'freeDelivery', label: 'Free Delivery' },
  { key: 'attractionsIncluded', label: 'Attractions Included' },
  { key: 'validityPeriod', label: 'Validity Period' },
  { key: 'audioGuide', label: 'Audio Guide' },
  { key: 'skipTheLine', label: 'Skip-the-Line Access' },
  { key: 'mobileApp', label: 'Mobile App' },
  { key: 'cancellationPolicy', label: 'Cancellation Policy' },
  { key: 'customerSupport', label: 'Customer Support' },
  { key: 'additionalPerks', label: 'Additional Perks' }
];

const trustFeatures = [
  {
    icon: Star,
    title: 'Unique Benefits',
    description: 'Exclusive access to premium attractions and experiences',
    stat: '50+ Partner Venues',
    color: 'from-yellow-400 to-orange-500'
  },
  {
    icon: Users,
    title: 'Proven Performance',
    description: 'Trusted by thousands of satisfied travelers worldwide',
    stat: '4.8/5 Rating',
    color: 'from-blue-400 to-cyan-500'
  },
  {
    icon: Shield,
    title: 'Quality Assurance',
    description: 'Safety-first approach with verified partners and secure booking',
    stat: '100% Secure',
    color: 'from-green-400 to-emerald-500'
  },
  {
    icon: Headphones,
    title: 'Award-winning Support',
    description: 'Round-the-clock assistance for seamless travel experience',
    stat: '24/7 Available',
    color: 'from-purple-400 to-pink-500'
  }
];

export function PassesPage({ 
  onHomeClick, 
  onMelbourneClick, 
  onPassesClick,
  onCheckoutClick, 
  onSignInClick, 
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onContactUsClick,
  currentPage,
  user
}: PassesPageProps) {
  const [selectedPass, setSelectedPass] = useState<string>('unlimited');

  const renderFeatureValue = (value: boolean | string) => {
    if (typeof value === 'boolean') {
      return value ? (
        <Check className="w-5 h-5 text-green-500 mx-auto" />
      ) : (
        <X className="w-5 h-5 text-red-400 mx-auto" />
      );
    }
    return <span className="text-gray-700">{value}</span>;
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Navigation */}
      <Navbar 
        activeCity="Melbourne"
        onCityChange={() => {}}
        onHomeClick={onHomeClick}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
        currentPage={currentPage}
        isUserSignedIn={!!user}
        user={user}
      />
      
      <CitySubmenu 
        currentPage={currentPage}
        onClose={() => {}}
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onAttractionsClick={onAttractionsClick}
        onPassesClick={onPassesClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
      />

      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
        {/* Page Header */}
        <div className="text-center mb-16">
          <div className="mb-6">

            <h1 className="font-merchant font-light text-4xl md:text-5xl lg:text-6xl mb-4">
              Buy <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Passes</span>
            </h1>
            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
              Skip the lines, save money, and explore more with our flexible city cards designed for modern travelers
            </p>
          </div>
        </div>

        {/* Pass Comparison Section */}
        <div className="mb-20">
          <RadioGroup 
            value={selectedPass} 
            onValueChange={setSelectedPass}
            className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto"
          >
            {passTypes.map((pass) => (
              <div key={pass.id} className="relative h-full">
                <Card className={`relative h-full flex flex-col transition-all duration-300 cursor-pointer ${
                  pass.popular 
                    ? 'ring-2 ring-primary shadow-xl' 
                    : selectedPass === pass.id 
                      ? 'ring-2 ring-primary/50 shadow-lg' 
                      : 'border-gray-200 shadow-md hover:shadow-lg hover:border-primary/30'
                }`}>
                  
                  {/* Popular Badge */}
                  {pass.popular && (
                    <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 z-10">
                      <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-6 py-1.5 font-semibold shadow-lg font-poppins">
                        Most Popular
                      </Badge>
                    </div>
                  )}

                  {/* Radio Button */}
                  <div className="absolute top-5 right-5 z-10">
                    <RadioGroupItem value={pass.id} id={pass.id} className="w-5 h-5" />
                  </div>

                  {/* Header - Fixed Height */}
                  <CardHeader className="text-center pb-4 pt-8 flex-shrink-0">
                    <CardTitle className="font-merchant text-2xl leading-tight mb-3 text-gray-900">
                      {pass.title}
                    </CardTitle>
                    <CardDescription className="font-poppins text-sm text-gray-600 leading-relaxed font-normal min-h-[48px] flex items-center justify-center px-4">
                      {pass.description}
                    </CardDescription>
                  </CardHeader>
                  
                  {/* Pricing Section - Fixed Height */}
                  <div className="px-6 pb-6 flex-shrink-0">
                    <div className="flex items-baseline justify-center gap-2 mb-2">
                      <span className="text-5xl font-bold text-gray-900 font-poppins">{pass.price}</span>
                      <span className="text-gray-500 font-poppins text-base">/ {pass.period}</span>
                    </div>
                    <div className="h-5 flex items-center justify-center">
                      {pass.originalPrice && (
                        <div className="text-sm text-gray-500 font-poppins">
                          <span className="line-through mr-2">{pass.originalPrice}</span>
                          <span className="text-green-600 font-medium">Save {Math.round(((parseFloat(pass.originalPrice.slice(1)) - parseFloat(pass.price.slice(1))) / parseFloat(pass.originalPrice.slice(1))) * 100)}%</span>
                        </div>
                      )}
                    </div>
                  </div>
                  
                  {/* Content - Flexible Height with Fixed Features Area */}
                  <CardContent className="pt-0 pb-6 px-6 flex-grow flex flex-col">
                    {/* Features List - Fixed height */}
                    <div className="flex-grow mb-6">
                      <div className="space-y-3">
                        {pass.features.slice(0, 6).map((feature, index) => (
                          <div key={index} className="flex items-start gap-3">
                            <Check className="w-4 h-4 text-green-500 mt-1 flex-shrink-0" />
                            <span className="text-sm text-gray-700 font-poppins leading-relaxed font-normal">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* CTA Button - Pushed to bottom */}
                    <div className="flex-shrink-0 space-y-3">
                      <Button 
                        className={`w-full h-12 rounded-lg font-semibold transition-all duration-300 font-poppins ${
                          pass.popular 
                            ? 'bg-primary hover:bg-primary/90 text-white shadow-md hover:shadow-lg' 
                            : 'bg-gray-900 hover:bg-gray-800 text-white hover:shadow-md'
                        }`}
                        onClick={onCheckoutClick}
                      >
                        PURCHASE NOW
                      </Button>
                      
                      <p className="text-xs text-gray-500 text-center font-poppins font-normal leading-tight">
                        ✓ Free cancellation up to 24 hours • Instant delivery
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            ))}
          </RadioGroup>
        </div>

        {/* Detailed Features Comparison Table */}
        <Card className="overflow-hidden mb-20 bg-white shadow-lg">
          <CardHeader className="text-center">
            <CardTitle className="font-merchant text-3xl font-bold text-gray-900 mb-2">
              Detailed Feature Comparison
            </CardTitle>
            <CardDescription className="text-lg text-gray-600 font-light">
              See exactly what's included with each pass type
            </CardDescription>
          </CardHeader>
          
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-gray-200 bg-gray-50">
                    <th className="text-left p-6 font-semibold text-gray-900 min-w-[200px]">Features</th>
                    <th className="text-center p-6 font-semibold text-gray-900 min-w-[200px]">Selective Pass</th>
                    <th className="text-center p-6 font-semibold text-gray-900 min-w-[200px] bg-primary/5">Premium Unlimited</th>
                  </tr>
                </thead>
                
                <tbody>
                  {featureComparison.map((feature, index) => (
                    <tr key={feature.key} className={`border-b border-gray-100 ${index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'}`}>
                      <td className="p-6 font-medium text-gray-900">
                        <div className="flex items-center">
                          <span className="w-2 h-2 bg-primary rounded-full mr-3"></span>
                          {feature.label}
                        </div>
                      </td>
                      <td className="p-6 text-center">
                        {renderFeatureValue(passTypes[0].tableFeatures[feature.key as keyof typeof passTypes[0]['tableFeatures']])}
                      </td>
                      <td className="p-6 text-center bg-primary/5">
                        {renderFeatureValue(passTypes[1].tableFeatures[feature.key as keyof typeof passTypes[1]['tableFeatures']])}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CardContent>
        </Card>

        {/* Mobile App Promotion Banner */}
        <div className="mb-20">
          <Card className="bg-gray-50 overflow-hidden shadow-lg">
            <CardContent className="p-0">
              <div className="grid lg:grid-cols-2 gap-12 items-center">
                
                {/* Smartphone Mockup */}
                <div className="relative flex justify-center p-8 lg:p-16">
                  <div className="relative">
                    {/* Phone Frame */}
                    <div className="w-64 h-[520px] bg-black rounded-[2.5rem] p-2 shadow-2xl">
                      <div className="w-full h-full bg-white rounded-[2rem] relative overflow-hidden">
                        
                        {/* Screen Content */}
                        <div className="absolute inset-0 bg-gradient-to-b from-primary/90 to-secondary/90">
                          
                          {/* Status Bar */}
                          <div className="flex justify-between items-center px-6 pt-4 pb-2 text-white text-sm">
                            <span>9:41</span>
                            <div className="flex gap-1">
                              <div className="w-4 h-2 bg-white rounded-sm opacity-80"></div>
                              <div className="w-4 h-2 bg-white rounded-sm opacity-60"></div>
                              <div className="w-4 h-2 bg-white rounded-sm opacity-40"></div>
                            </div>
                          </div>
                          
                          {/* App Header */}
                          <div className="px-6 py-4">
                            <div className="flex items-center gap-3 mb-6">
                              <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
                                <span className="text-xl">🏙️</span>
                              </div>
                              <div>
                                <h3 className="text-white font-semibold text-lg">CityCards</h3>
                                <p className="text-white/70 text-sm">Melbourne Explorer</p>
                              </div>
                            </div>
                          </div>
                          
                          {/* Active Pass Card */}
                          <div className="mx-6 mb-6">
                            <div className="bg-white/15 backdrop-blur-md rounded-2xl p-4 border border-white/20">
                              <div className="flex justify-between items-center mb-3">
                                <span className="text-white font-semibold">Premium Pass</span>
                                <Badge className="bg-green-400 text-green-900 text-xs">Active</Badge>
                              </div>
                              <div className="h-2 bg-white/20 rounded-full mb-3">
                                <div className="h-2 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full w-3/4"></div>
                              </div>
                              <p className="text-white/80 text-xs">18 of 24 attractions visited</p>
                            </div>
                          </div>
                          
                          {/* Quick Actions */}
                          <div className="px-6 mb-6">
                            <div className="grid grid-cols-3 gap-3">
                              {[
                                { icon: '🗺️', label: 'Map' },
                                { icon: '📍', label: 'Near Me' },
                                { icon: '⭐', label: 'Favorites' }
                              ].map((action, index) => (
                                <div key={index} className="bg-white/10 backdrop-blur-sm rounded-xl p-3 text-center border border-white/20">
                                  <span className="text-lg mb-1 block">{action.icon}</span>
                                  <span className="text-white text-xs">{action.label}</span>
                                </div>
                              ))}
                            </div>
                          </div>
                          
                          {/* Featured Attraction */}
                          <div className="mx-6">
                            <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                              <h4 className="text-white font-medium mb-2">Today's Highlight</h4>
                              <div className="flex items-center gap-3">
                                <div className="w-12 h-12 bg-white/20 rounded-lg"></div>
                                <div>
                                  <p className="text-white text-sm font-medium">Royal Botanic Gardens</p>
                                  <p className="text-white/70 text-xs">2.5km away • Open now</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          {/* Bottom Tab Bar */}
                          <div className="absolute bottom-6 left-4 right-4">
                            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-2 border border-white/20">
                              <div className="grid grid-cols-4 gap-2 text-center">
                                {['Home', 'Passes', 'Map', 'Profile'].map((tab, index) => (
                                  <div key={index} className="py-2">
                                    <span className="text-white text-xs">{tab}</span>
                                  </div>
                                ))}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                
                {/* Content */}
                <div className="p-8 lg:p-16">
                  <h2 className="heading-dynamic text-4xl text-gray-900 mb-6">
                    <span className="font-light">Access all your</span>{' '}
                    <span className="font-bold italic text-gradient-primary">city cards</span>{' '}
                    <span className="font-normal">on your</span>{' '}
                    <span className="font-semibold text-emphasis">phone</span>
                  </h2>
                  <p className="text-xl text-gray-600 mb-8 leading-relaxed font-light">
                    Download our mobile app for easy access to your passes, maps, and exclusive offers. 
                    Never worry about losing your tickets again.
                  </p>
                  
                  {/* App Features */}
                  <div className="space-y-4 mb-8">
                    {[
                      'Instant pass activation and QR code access',
                      'Offline maps and attraction information',
                      'Real-time updates and exclusive app-only offers',
                      'Track your progress and plan your journey'
                    ].map((feature, index) => (
                      <div key={index} className="flex items-center gap-3">
                        <Check className="w-5 h-5 text-green-500" />
                        <span className="text-gray-700 font-light">{feature}</span>
                      </div>
                    ))}
                  </div>
                  
                  {/* Download Buttons */}
                  <div className="flex flex-col sm:flex-row gap-4 mb-8">
                    <Button className="bg-black text-white hover:bg-gray-800 flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-semibold">
                      <Download className="w-5 h-5" />
                      Download for iOS
                    </Button>
                    <Button className="bg-black text-white hover:bg-gray-800 flex items-center justify-center gap-3 px-6 py-4 rounded-xl font-semibold">
                      <Download className="w-5 h-5" />
                      Get it on Google Play
                    </Button>
                  </div>
                  
                  {/* QR Code */}
                  <div className="flex items-center gap-4">
                    <div className="w-16 h-16 bg-black rounded-xl p-2">
                      <div className="w-full h-full bg-white rounded-lg flex items-center justify-center">
                        <QrCode className="w-8 h-8 text-black" />
                      </div>
                    </div>
                    <div>
                      <p className="font-medium text-gray-900">Scan to download</p>
                      <p className="text-sm text-gray-600 font-light">Available on iOS and Android</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Why Choose Us Section */}
        <div className="mb-20">
          <div className="text-center mb-12">
            <h2 className="heading-dynamic text-4xl text-gray-900 mb-4">
              <span className="font-light">Why Choose</span>{' '}
              <span className="font-bold italic text-gradient-primary">CityCards</span><span className="font-normal">?</span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-light">
              We're committed to providing the best city exploration experience with unmatched value and service
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {trustFeatures.map((feature, index) => {
              const IconComponent = feature.icon;
              return (
                <Card key={index} className="text-center p-8 border-gray-200 hover:shadow-lg transition-shadow duration-300">
                  <CardContent className="p-0">
                    <div className={`w-16 h-16 bg-gradient-to-r ${feature.color} rounded-2xl flex items-center justify-center mx-auto mb-6`}>
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="font-semibold text-gray-900 mb-3">{feature.title}</h4>
                    <p className="text-gray-600 mb-4 leading-relaxed font-light">{feature.description}</p>
                    <div className="text-2xl font-bold text-primary mb-1">{feature.stat}</div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>

        {/* Enhanced Testimonials Section */}
        <EnhancedTestimonials />

        {/* Reviews Section */}
        <ReviewsSection />

        {/* Final CTA Section */}
        <div className="text-center bg-gradient-to-r from-primary to-secondary rounded-3xl p-12 text-white relative overflow-hidden">
          {/* Background Pattern */}
          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent"></div>
          <div className="absolute top-10 right-10 w-32 h-32 bg-white/5 rounded-full"></div>
          <div className="absolute bottom-10 left-10 w-24 h-24 bg-white/5 rounded-full"></div>
          
          <div className="relative z-10">
            <h3 className="heading-dynamic text-4xl mb-4">
              <span className="font-light">Ready to</span>{' '}
              <span className="font-bold italic text-emphasis">explore</span>{' '}
              <span className="font-semibold">Melbourne?</span>
            </h3>
            <p className="text-xl mb-8 max-w-2xl mx-auto opacity-90 font-light">
              Choose your pass and start discovering amazing attractions with skip-the-line access. 
              Money-back guarantee included.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
              <Button 
                size="lg" 
                className="bg-white text-primary hover:bg-gray-100 py-4 px-8 rounded-2xl font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-200"
              >
                Choose Your Pass
              </Button>
              <div className="flex items-center gap-2 text-white/80">
                <Check className="w-5 h-5" />
                <span className="font-light">No hidden fees • Instant confirmation</span>
              </div>
            </div>
            
            <div className="flex justify-center items-center gap-8 text-sm text-white/70">
              <span className="flex items-center gap-2 font-light">
                <Shield className="w-4 h-4" />
                SSL Secured
              </span>
              <span className="flex items-center gap-2 font-light">
                <Heart className="w-4 h-4" />
                Money Back Guarantee
              </span>
              <span className="flex items-center gap-2 font-light">
                <Clock className="w-4 h-4" />
                24/7 Support
              </span>
            </div>
          </div>
        </div>
      </div>

      <Footer 
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}

export default PassesPage;