"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import Image from "next/legacy/image";
import { Service } from "@/lib/api/serviceService";
import { serviceUtils } from "@/lib/api/serviceService";

interface ServiceDetailsProps {
  service: Service;
}

const ServiceDetails = ({ service }: ServiceDetailsProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Animate content on scroll
    gsap.set(".detail-content", {
      x: -50,
      opacity: 0,
    });
    
    gsap.set(".detail-image", {
      x: 50,
      opacity: 0,
    });

    ScrollTrigger.batch(".detail-content, .detail-image", {
      start: "-100px bottom",
      onEnter: (elements) =>
        gsap.to(elements, {
          x: 0,
          opacity: 1,
          duration: 0.8,
          ease: "power2.out",
        }),
    });
  }, []);

  return (
    <section id="service-details" className="enterprise-details py-5">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="row align-items-center">
              <div className="col-12 col-lg-6">
                <div className="detail-content">
                  <div className="section-header mb-5">
                    <span className="enterprise-section-tag">About Service</span>
                    <h2 className="enterprise-section-title mb-4">
                      About Our {service.title}
                    </h2>
                    {service.short_description && (
                      <p className="enterprise-section-description">
                        {service.short_description}
                      </p>
                    )}
                  </div>
              
                  <div className="enterprise-stats mb-4">
                    <div className="row g-3">
                      <div className="col-12">
                        <div className="enterprise-stat-card">
                          <div className="stat-icon">
                            <i className="fa-solid fa-star"></i>
                          </div>
                          <div className="stat-content">
                            <div className="stat-number">
                              {service.featured ? 'Featured' : 'Standard'}
                            </div>
                            <div className="stat-label">Service Type</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div className="enterprise-meta mb-4">
                    <div className="meta-item">
                      <div className="meta-icon">
                        <i className="fa-solid fa-tag"></i>
                      </div>
                      <div className="meta-content">
                        <span className="meta-label">Category</span>
                        <span className="meta-value">{service.category?.name || 'General'}</span>
                      </div>
                    </div>
                    {service.duration && (
                      <div className="meta-item">
                        <div className="meta-icon">
                          <i className="fa-solid fa-clock"></i>
                        </div>
                        <div className="meta-content">
                          <span className="meta-label">Duration</span>
                          <span className="meta-value">{service.duration}</span>
                        </div>
                      </div>
                    )}
                  </div>
                  
                </div>
              </div>
              
              <div className="col-12 col-lg-6">
                <div className="detail-image">
                  <div className="enterprise-image-wrapper">
                    <Image
                      src={serviceUtils.getServiceImageUrl(service) || '/images/service/default.png'}
                      alt={service.title}
                      width={600}
                      height={400}
                      className="enterprise-service-image"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServiceDetails;