"use client";
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";

interface ProcessProps {
  slug: string;
}

const Process = ({ slug }: ProcessProps) => {
  const { caseStudy, loading } = useCaseStudy(slug);

  if (loading || !caseStudy || !caseStudy.process_steps || caseStudy.process_steps.length === 0) {
    return null;
  }

  return (
    <section className="pt-120 pb-120 tp-process bg-black sticky-wrapper">
      <div className="container">
        <div className="row vertical-column-gap">
          <div className="col-12 col-lg-6">
            <div className="process__content sticky-item">
              <h2 className="mt-8 title-anim text-white fw-7 mb-24">
                {caseStudy.title} Process
              </h2>
              <p className="cur-lg text-quinary">
                {caseStudy.excerpt}
              </p>
            </div>
          </div>
          <div className="col-12 col-lg-6 col-xxl-5 offset-xxl-1">
            <div className="process__thumb sticky-item">
              {caseStudy.process_steps.map((step) => (
                <div key={step.id} className="process__single">
                  <span className="op-text text-white mb-40 cur-lg">
                    {String(step.step_number).padStart(2, '0')}
                  </span>
                  <h5 className="mt-8 text-white mb-24 title-anim">
                    {step.title}
                  </h5>
                  <p className="cur-lg text-quinary">
                    {step.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Process;