'use client'
import React, { useState } from "react";
import { communityData } from "@/utility/constant.utils"; // make sure you rename it in your utils
export default function Section1() {
  const yearGroups = Object.keys(communityData);
  const [selectedYear, setSelectedYear] = useState(yearGroups[0]);

  return (
    <>
      {/*===== COMMUNITY DIRECTORY STARTS =======*/}
      <div className="blog-details-section sp1">
        <div className="container">
          <div className="row">
            {/* Sidebar */}
            <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>

            {/* Right Side - Members */}
            <div className="col-lg-9">
              <div className="schedule-section-area sp10">
                <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}>
                              <h4 style={{ marginTop: "30px", fontWeight: "bold" }}>{role}</h4>
                              <div className="row">
                                {members.map((member, idx) => (
                                  <div className="col-md-4" key={idx}>
                                    <div className="card" style={{ padding: "10px", margin: "10px", textAlign: "center", border: "1px solid #ccc", borderRadius: "10px" }}>
                                      <img
                                        src={member.image}
                                        alt={member.name}
                                        style={{ width: "100%", height: "200px", objectFit: "cover", borderRadius: "8px" }}
                                      />
                                      <h5 className="blog-auhtor-details-name">{member.name}</h5>
                                      <p className="blog-auhtor-details-post">{member.post}</p>
                                    </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 =======*/}
    </>
  );
}