'use client';

import Layout from '@/components/layout/Layout';
import { communitySubmenuData } from '@/utility/constant.utils';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";



export default function CricketClub() {
    // Show only images with id 1 to 4
     const galleryImages = communitySubmenuData.filter(img => +img.id >= 1 && +img.id <= 4);
   
     const [open, setOpen] = useState(false);
     const [index, setIndex] = useState(0);

    return (
        <>
            <Layout headerStyle={1} footerStyle={1}>
                {/* Header Section */}
                <div
                    className="inner-page-header"
                    style={{ backgroundImage: 'url(/assets/img/bg/header-bg11.png)' }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-6 m-auto">
                                <div className="heading1 text-center">
                                    <h1>Cricket Club</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" /> <span>Community</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="bloginner-section-area sp1">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="event2-header heading5 space-margin60">
                                    <h2 className="text-anime-style-3">
                                       Tamil Cricket Club Waterloo
                                    </h2>
                                    <div className="space24" />
                                    <p>Waterloo region’s Tamil Cricket Club was started in 2018. Venue:  Waterloo Park, Waterloo, Ontario Canada.  Spring/Summer season only.  Membership is for Tamil Cultural Association of Waterloo Region only.

                                    The club is primarily supported by Tamil Cultural Association of Waterloo Region.  More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a></p>
                                </div>
                            </div>
                        </div>
                       

                        <div className="row gx-5">
                            <div className="col-lg-12">
                                <div className="row mt-4">
                                    {galleryImages.map((img, i) => (
                                         <div className="col-lg-3 col-md-3 col-sm-12 col-6 event-img" key={img.id}>
                                        <div
                                            className="memory-boxarea pl-3"
                                            style={{ cursor: "pointer" }}
                                            onClick={() => {
                                            setIndex(i);
                                            setOpen(true);
                                            }}
                                        >
                                            <div className="image" data-aos="zoom-in" data-aos-duration={1000}>
                                            <img src={img.src} alt={img.alt} style={{ width: "100%", borderRadius: 8 }} />
                                            </div>
                                        </div>
                                        </div>
                                                                ))}

                                    {galleryImages.length === 0 && (
                                        <div className="col-12 text-center mt-5">
                                            <p className="text-muted">No images found for this event.</p>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <Lightbox
          open={open}
          close={() => setOpen(false)}
          slides={galleryImages}
          index={index}
        />
            </Layout>
        </>
    );
}