"use client";

import React from "react";
import ServicesImageSlider from "./ServicesImageSlider";
import ServiceSidebar from "./ServiceSidebar";

interface Props {
  slug: string;
  service: any;
  sidebar: any;
}

export default function ServiceDetailsContent({
  slug,
  service,
  sidebar
}: Props) {

  return (
    <div className="services-details-area ptb-100">
      <div className="container">
        <div className="row">

          <div className="col-lg-8">

            <ServicesImageSlider images={service.images} />

            <div className="services-details-desc service-inner-content">

              <h3>{service.title}</h3>

              {service.description.map((text: any, index: any) => (
                <p key={index}>{text}</p>
              ))}

              <div className="content">
                <ul>
                  {service.features.map((item: any, index: any) => (
                    <li key={index}>
                      <i className="bx bx-check"></i>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>

            </div>

          </div>

          <div className="col-lg-4">

            <ServiceSidebar
              sidebar={sidebar}
              currentSlug={`/service/cms-ecommerce/${slug}/`}
            />

          </div>

        </div>
      </div>
    </div>
  );
}