'use client';

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

export default function CricketClub() {

    const galleryImages = communitySubmenuData.filter(img => +img.id >= 9 && +img.id <= 12);

    const [open, setOpen] = useState(false);
    const [index, setIndex] = useState(0);

    return (
        <>
            <Layout headerStyle={1} footerStyle={1}>

                <div
                    className="inner-page-header"
                    style={{
                        backgroundImage: 'url(/assets/img/community/badminton/badminton-club-banner.webp',
                    }}
                >
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 m-auto">
                                <div className="heading1">
                                    <h1>Badminton Club</h1>
                                    <div className="space20" />
                                    <Link href="/" className="text-white text-decoration-none">
                                        Home <i className="fa-solid fa-angle-right mx-2" />
                                        <span>Badminton Club</span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Description Section */}
                <div className="bloginner-section-area sp4">
                    <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">
                                        Badminton Club Cambridge
                                    </h2>
                                    <div className="space24" />
                                    <p>
                                        Waterloo region’s Tamil Badminton Club was started in 2019. It is held on Friday at 6:30 – 9:30pm, William G Davis Public School, 530 Langs Drive, Cambridge, Ontario. Membership is open to members of Tamil Cultural Association of Waterloo Region only.
                                    </p>
                                    <div className="space24" />
                                    <p className='mb-2'><strong>2022/23 Badminton Membership Fee:</strong></p>
                                    <p>Single $106.00</p>
                                    <p>Family $157.00</p>
                                    <div className="space24" />
                                    <p>
                                        A Badminton club member has to obtain TCA membership prior to joining the club. Membership includes Court fee and Insurance. Fall/Winter season only. (Sep.23/22 To May 26/23)
                                    </p>
                                    <p>
                                        The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.
                                        More info: <a href="mailto:mail@tca.srika.in">mail@tca.srika.in</a>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div className="row gx-4 gy-4 mt-4">
                            {galleryImages.length > 0 ? (
                                galleryImages.map((img, i) => (
                                    <div
                                        className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
                                        key={img.id}
                                        onClick={() => {
                                            setIndex(i);
                                            setOpen(true);
                                        }}
                                        style={{ cursor: 'pointer' }}
                                    >
                                        <div className="memory-boxarea rounded overflow-hidden h-100">
                                            <div
                                                className="image"
                                                data-aos="zoom-in"
                                                data-aos-duration={1000}
                                                style={{ borderRadius: 8 }}
                                            >
                                                <img
                                                    src={img.src}
                                                    alt={img.alt}
                                                    className="img-fluid w-100"
                                                    style={{ objectFit: 'cover', height: '100%', borderRadius: 8 }}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                ))
                            ) : (
                                <div className="col-12 text-center mt-5">
                                    <p className="text-muted">No images found for this event.</p>
                                </div>
                            )}
                        </div>
                    </div>
                </div>

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