'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 >= 5 && +img.id <= 8);

  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/cricket-club/cricket-club-banner.webp)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            padding: '100px 0',
          }}
        >
          <div className="container">
            <div className="row">
              <div className="col-lg-6 m-auto">
                <div className="heading1 text-center">
                  <h1 className="mb-3">Cricket Club</h1>
                  <Link href="/" className="text-decoration-none">
                    Home <i className="fa-solid fa-angle-right mx-2" />
                    <span>Community</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>

        <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 fw-bold">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.
                    <br />
                    <br />
                    The club is primarily supported by Tamil Cultural Association of Waterloo Region.
                    More info:{' '}
                    <a href="mailto:mail@tca.srika.in" className="text-primary">
                      mail@tca.srika.in
                    </a>
                  </p>
                  <div className="space24" />
                </div>
              </div>
            </div>

            <div className="row gx-4 gy-4">
              {galleryImages.length > 0 ? (
                galleryImages.map((img, i) => (
                  <div
                    key={img.id}
                    className="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12"
                    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 open={open} close={() => setOpen(false)} slides={galleryImages} index={index} />
      </Layout>
    </>
  );
}