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

    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>Tamil School</h1>
                                    <div className="space20" />
                                    <Link href="/">
                                        Home <i className="fa-solid fa-angle-right" /> <span>Tamil School</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">
                                        Waterloo Region Tamil School
                                    </h2>

                                    <div className="space24" />
                                    <p>Waterloo region’s first Tamil language class was started in 1987 with the support of Late Mr. Marcil Francis, Late Prof. Pala Kannappan, Prof. Selvakumar and Mrs.Pushpa Seevaratnam. It was held at Victoria Public School, down town Kitchener.</p>


                                    <div className="space24" />
                                    <p>The first Tamil Variety show & Social Hour was held on December 5th, 1987 at Keatsway Public School, Waterloo.</p>



                                    <div className="space24" />
                                    <p>Tamil Class was re-activated in 2000 at St.John’s School, Guelph under the ILP program. Mrs. Padhmini Swaminathan was the first teacher. In the following year it was moved to St.Peter’s School, Guelph and successive teachers were Shayamala Navam, Dharini Sivakumar and Shanthi Rajan. Classes discontinued in 2005 due to lack of student participation.</p>


                                    <div className="space24" />
                                    <p>In 2011, Waterloo District School board in conjunction with Tamil Cultural Association recommenced the Tamil class at Hespler Public School, Cambridge. Mrs.E. Kunamalar was the teacher. </p>


                                    <div className="space24" />
                                    <p>In the year 2020/21, as per instructions from Ontario Ministry of Education, Waterloo Tamil school switched to an online portal.  This was due to Covid19 pandemic in the Province. Virtual and in house classes are conducted by Mrs. Suharmini Shrishankar.</p>

                                    <div className="space24" />
                                    <p>October 2022, Waterloo school board recommenced live Tamil class at 555 Ellis Rd, Cambridge, ON N3C 4K2.  It is held on Saturday at 9.00am

                                        The school is primarily supported by Tamil Cultural Association of Waterloo Region and Waterloo District School Board.</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 mb-4" 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>
        </>
    );
}
