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

    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/tamil-school/school-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>Tamil School</h1>
                                    <div className="space20" />
                                    <Link href="/" className="text-decoration-none">
                                        Home <i className="fa-solid fa-angle-right mx-2" />
                                        <span>Tamil School</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">
                                        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, downtown 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 Covid-19 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</p>

                                    <p>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-4 gy-4 mt-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 mb-2"
                                                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>
        </>
    );
}
