'use client'

import Link from "next/link";
import { useState } from "react";

export default function ServiceDetailClient({ slug, service, servicesList }) {
  const [isActive, setIsActive] = useState({ status: false, key: 1 });

  const handleToggle = (key) => {
    if (isActive.key === key) {
      setIsActive({ status: false });
    } else {
      setIsActive({ status: true, key });
    }
  };

  return (
    <div>
      {/* service-section */}
      <section className="service-details pt_90 pb_90">
        <div className="auto-container">
          <div className="row clearfix">

            <div className="col-lg-4 col-md-12 col-sm-12 sidebar-side">
              <div className="default-sidebar service-sidebar mr_15">
                <div className="sidebar-widget category-widget">
                  <div className="widget-title"><h3>Services</h3></div>
                  <div className="widget-content">
                    <ul className="category-list clearfix">
                      {servicesList.map((item) => (
                        <li key={item.slug}>
                          <Link
                            href={`/etobicoke-treatment-service/${item.slug}`}
                            className={slug === item.slug ? "current" : ""}
                          >
                            {item.shortTitle}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
                <div className="service-block-one">

                  <div className="inner-box">
                    <div className="image-box">
                      <figure className="image">
                        <img src={service.sidebarImg} alt={service.alt} /></figure>
                    </div>
                    <div className="lower-content">
                      <div className="icon-box">
                        <img
                          src={service.icon}
                          alt={`${service.title} Icon`}
                        />
                      </div>
                      <h3>{service.shortTitle}</h3>
                      <p>{service.shortDescription}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Content */}
            <div className="col-lg-8 col-md-12 col-sm-12 content-side">
              <div className="service-details-content">
                <div className="content-one mb_60">
                  <figure className="image-box mb_40"><img src={service.bigImg} alt={service.alt} /></figure>

                  <div dangerouslySetInnerHTML={{ __html: service.description } || "No description available."} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}