"use client";
import React, { useState } from "react";
import Image from "next/image";
import { processData } from "@/data/home/processData";

const ProcessSection: React.FC = () => {
  const { subTitle, title, processes } = processData;
  const [activeId, setActiveId] = useState<number>(
    processes.find((p) => p.isActive)?.id || processes[0].id
  );

  return (
    <section className="process-sec space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {subTitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            {title}
          </h2>
        </div>
        <div
          className="process-info"
          data-aos="zoom-in"
          data-aos-duration={900}
          data-aos-delay={300}
        >
          {processes.map((process) => (
            <div
              className={`process-card ${activeId === process.id ? "active" : ""}`}
              key={process.id}
              onClick={() => setActiveId(process.id)}
            >
              <div className="inner-content">
                <span className="sub-title">{process.step}</span>
                <div className="title">{process.title}</div>
              </div>
              <div
                className={`process-active ${
                  activeId === process.id ? "active" : ""
                }`}
              >
                <div className="card-content">
                  <div className="inner-content2">
                    <span className="sub-title">{process.step}</span>
                    <div className="title">{process.title}</div>
                    <p>{process.description}</p>
                  </div>
                  <div className="process-img">
                    <Image
                      src={process.img}
                      alt={`${process.title} Image`}
                      width={400}
                      height={400}
                    />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ProcessSection;