'use client'
import React, { useState } from "react";
import Link from "next/link";
import { communityData } from "@/utility/constant.utils";

export default function Section1() {
  const yearGroups = Object.keys(communityData);
  const [selectedYear, setSelectedYear] = useState(yearGroups[0]);

  return (
    <>
      <div className="blog-details-section sp4">
        <div className="container">
          <div className="row">
            <div className="col-lg-3">
              <div className="space30 d-lg-none d-block" />
              <div className="blog-auhtor-details">
                <div className="blog-categories">
                  <h3>Community Directory</h3>
                  <div className="space12" />
                  <ul>
                    {yearGroups.map((year) => (
                      <li key={year}>
                        <button
                          className={`category-btn${selectedYear === year ? " active" : ""}`}
                          onClick={() => setSelectedYear(year)}
                        >
                          {year}
                          <span><i className="fa-solid fa-angle-right" /></span>
                        </button>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>

            <div className="col-lg-9">
              <div className="team-sperkers-section-area sp1">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-11 m-auto">
                      <div className="schedule">
                        {communityData[selectedYear] ? (
                          Object.entries(communityData[selectedYear]).map(([role, members]) => (
                            <div key={role} className="mb-5">
                              <h3 style={{ marginBottom: "30px", fontWeight: "bold" }}>{role}</h3>
                              <div className="row gx-4">
                                {members.map((member, idx) => (
                                  <div className="col-lg-4 col-md-6 mb-5" key={idx}>
                                    <div className="our-team-boxarea">
                                      <div className="team-widget-area">
                                        <img src="/assets/img/elements/elements25.webp" alt="" className="elements21" />
                                        <img src="/assets/img/elements/elements26.webp" alt="" className="elements22" />
                                        <div className="img1">
                                          <img
                                            src={member.image}
                                            alt={member.name}
                                            className="team-img4"
                                            style={{ height: "280px", objectFit: "cover" }}
                                          />
                                        </div>
                                      </div>
                                      <div className="content-area">
                                       <Link href="/speakers-single">{member.name}</Link> 
                                        <div className="space6" />
                                        <p>{member.post}</p>
                                      </div>
                                    </div>
                                  </div>
                                ))}
                              </div>
                            </div>
                          ))
                        ) : (
                          <p>No data available for this year group.</p>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      {/*===== COMMUNITY DIRECTORY ENDS =======*/}
    </>
  );
}