"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { Service, ServiceFeature } from "@/lib/api/serviceService";

interface ServiceFeaturesProps {
  service: Service;
}

const ServiceFeatures = ({ service }: ServiceFeaturesProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Modern entrance animations
    gsap.set(".feature-item", {
      y: 60,
      opacity: 0,
      scale: 0.9,
    });

    ScrollTrigger.batch(".feature-item", {
      start: "-150px bottom",
      onEnter: (elements) =>
        gsap.to(elements, {
          y: 0,
          opacity: 1,
          scale: 1,
          stagger: {
            amount: 0.6,
            from: "start"
          },
          duration: 1,
          ease: "power3.out",
        }),
    });
    
    // Animate section header
    gsap.fromTo(".section-header", 
      {
        y: 40,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power3.out",
        scrollTrigger: {
          trigger: ".section-header",
          start: "-100px bottom"
        }
      }
    );
  }, []);

  if (!service.features || service.features.length === 0) {
    return null;
  }

  return (
    <section className="enterprise-features py-4">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="section-header text-center mb-4">
              <span className="enterprise-section-tag">Key Features</span>
              <h2 className="enterprise-section-title mb-3">
                {service.title} Features
              </h2>
              <p className="enterprise-section-description">
                {service.features_description || `Discover the key features that make our ${service.title.toLowerCase()} service stand out from the competition`}
              </p>
            </div>
            
            <div className="row g-5">
              {service.features.map((feature: ServiceFeature, index: number) => (
                <div key={feature.id} className="col-12 col-md-6 col-lg-4">
                  <div className="feature-item enterprise-section-card">
                    <div className="card-icon">
                      <i className={`fa-solid fa-${feature.icon || 'check'}`}></i>
                    </div>
                    <div className="card-content">
                      <h6 className="card-title">
                        {feature.title}
                      </h6>
                      <p className="card-description">
                        {feature.description}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ServiceFeatures;