GNX-WEB/frontEnd/components/pages/services/ServiceMain.tsx

"use client";
import { useState, useEffect } from "react";
import Image from "next/legacy/image";
import Link from "next/link";
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";
import { useServices } from "@/lib/hooks/useServices";
import { serviceUtils } from "@/lib/api/serviceService";

const ServiceMain = () => {
  // Fetch services from API
  const { services, loading, error } = useServices();


  // Show loading state
  if (loading) {
    return (
      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center">
                <div className="spinner-border" role="status">
                  <span className="visually-hidden">Loading...</span>
                </div>
                <p className="mt-3">Loading services...</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Show error state
  if (error) {
    return (
      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center">
                <div className="alert alert-danger" role="alert">
                  <h4>Error Loading Services</h4>
                  <p>{error}</p>
                  <button 
                    className="btn btn-primary" 
                    onClick={() => window.location.reload()}
                  >
                    Try Again
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Show empty state
  if (!services || services.length === 0) {
    return (
      <section className="tp-service pt-120 fade-wrapper" id="scroll-to">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="text-center">
                <h3>No Services Available</h3>
                <p>We&apos;re working on adding new services. Please check back later.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="enterprise-services py-5" id="scroll-to">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="section-header text-center mb-5">
              <span className="enterprise-section-tag">Our Services</span>
              <h2 className="enterprise-section-title mb-4">
                Professional Software Development Services
              </h2>
              <p className="enterprise-section-description">
                We deliver comprehensive technology solutions tailored to your business needs
              </p>
            </div>
          </div>
        </div>
        
        <div className="row g-4">
          {services.map((service, index) => (
            <div key={service.id} className="col-12 col-lg-6 col-xl-4">
              <div className="enterprise-service-card">
                <div className="service-image-wrapper">
                  <Link href={`/services/${service.slug}`}>
                    <Image
                      src={getValidImageUrl(serviceUtils.getServiceImageUrl(service), FALLBACK_IMAGES.SERVICE)}
                      alt={service.title}
                      width={400}
                      height={300}
                      className="service-image"
                    />
                  </Link>
                  <div className="service-overlay">
                    <Link href={`/services/${service.slug}`} className="btn btn-primary">
                      <span>Learn More</span>
                      <i className="fa-solid fa-arrow-right ms-2"></i>
                    </Link>
                  </div>
                </div>
                
                <div className="service-content">
                  <div className="service-meta">
                    <span className="service-number">
                      {String(index + 1).padStart(2, '0')}
                    </span>
                    {service.category && (
                      <span className="service-category">
                        {service.category.name}
                      </span>
                    )}
                  </div>
                  
                  <h3 className="service-title">
                    <Link href={`/services/${service.slug}`}>
                      {service.title}
                    </Link>
                  </h3>
                  
                  <p className="service-description">
                    {service.short_description || service.description}
                  </p>
                  
                  <div className="service-footer">
                    <Link href={`/services/${service.slug}`} className="service-link">
                      <span>View Details</span>
                      <i className="fa-solid fa-arrow-right"></i>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ServiceMain;