'use client'
import Footer from '@/app/components/Footer'
import HeroSection from '@/app/components/HeroSection'
import Navbar from '@/app/components/Navbar/Navbar'
import WorksSection from '@/app/components/servicesPageComponents/WorksSection'
import ServicesTypes from '@/app/components/servicesPageComponents/ServicesTypes'
import React, { useState } from 'react'
import { useParams } from 'next/navigation'
import { servicesData } from '@/app/data/ServiceData'

const ServicePage = () => {
    const { slug } = useParams();
     const service = servicesData.find((s) => s.slug === slug);
       if (!service) return <div>Service not found</div>;
const [activeTab, setActiveTab] = useState(
  service?.tabs?.length ? service.tabs[0] : null
);

  return (
   <div className="">
      <Navbar />
      <main className="">
        {/* Hero Section */}
        <HeroSection head={service?.title} title={service?.heading} titleHighlight="" description={service?.desc}  />
        <ServicesTypes activeTab={activeTab} setActiveTab={setActiveTab} service={service}  />
        <WorksSection service={service} />
      </main>
      <Footer  />
    </div>
  )
}

export default ServicePage