"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;
  }

  const processSteps = caseStudy.process_steps;

  return (
    <section className="case-study-process luxury-process pt-120 pb-120">
      <div className="container">
        <div className="row vertical-column-gap-lg">
          <div className="col-12 col-lg-5">
            <div className="process-content">
              <h2 className="process-title">
                Implementation Process
              </h2>
              <p className="process-description">
                {caseStudy.excerpt || 'Our systematic approach ensures successful project delivery.'}
              </p>
            </div>
          </div>
          <div className="col-12 col-lg-7">
            <div className="process-steps-list">
              {processSteps.map((step, index) => (
                <div key={step.id} className="process-step-item">
                  <div className="step-number">
                    {String(step.step_number).padStart(2, '0')}
                  </div>
                  <div className="step-content">
                    <h4 className="step-title">{step.title}</h4>
                    <p className="step-description">{step.description}</p>
                  </div>
                  {index < processSteps.length - 1 && (
                    <div className="step-connector"></div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Process;