import React, { useState } from "react";
import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from "reactstrap";
import classnames from "classnames";
import Link from "next/link";
import Image from "next/image";
import { TabServices } from "../../utils/constant.utils"; // JSON array

const ClickHandler = () => {
  window.scrollTo(10, 0);
};

// Extract unique categories from the JSON dynamically
const categories = [...new Set(TabServices.map((service) => service.category))];

const ServiceSectionS2 = () => {
  const [activeTab, setActiveTab] = useState(categories[0]);

  const toggle = (tab) => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  return (
    <div className="wpo-campaign-area-s4 section-padding">
      <div className="container">
        <div className="wpo-campaign-wrap">
          {/* Tab Navigation */}
          <Nav tabs>
            {categories.map((cat, idx) => (
              <NavItem key={idx}>
                <NavLink
                  className={classnames({ active: activeTab === cat })}
                  onClick={() => toggle(cat)}
                >
                  {cat}
                </NavLink>
              </NavItem>
            ))}
          </Nav>

          {/* Tab Content */}
          <TabContent activeTab={activeTab}>
            {categories.map((cat, idx) => (
              <TabPane tabId={cat} key={idx}>
                <Row>
                  {TabServices.filter((srv) => srv.category === cat).map(
                    (service, srvIdx) => (
                      <div className="col-lg-4 col-md-6 col-12" key={srvIdx}>
                        <div className="wpo-campaign-single">
                          <div className="wpo-campaign-item">
                            <div className="wpo-campaign-img">
                              <Image
                                src={service.sImgS}
                                alt={service.sTitle}
                                width={400}
                                height={250}
                              />
                            </div>
                            <div className="wpo-campaign-content">
                              <div className="wpo-campaign-text-top">
                                <h2>
                                  <Link
                                    onClick={ClickHandler}
                                    href={`/service-single/[slug]`}
                                    as={`/service-single/${service.slug}`}
                                  >
                                    {service.sTitle}
                                  </Link>
                                </h2>
                                <p>{service.description}</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    )
                  )}
                </Row>
              </TabPane>
            ))}
          </TabContent>
        </div>
      </div>
    </div>
  );
};

export default ServiceSectionS2;