"use client";
import Image from "next/legacy/image";
import Link from "next/link";
import { useCaseStudies } from "@/lib/hooks/useCaseStudy";
import { getImageUrl } from "@/lib/imageUtils";

const CaseItems = () => {
  const { caseStudies, loading: casesLoading } = useCaseStudies();
  
  if (casesLoading) {
    return (
      <section className="fix-top pb-120 c-study">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <p className="text-center">Loading case studies...</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="fix-top pb-120 c-study">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="c-study-banner pb-120">
              <div className="row">
                <div className="col-12 col-lg-9">
                  <h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
                    Case Studies
                  </h2>
                <p className="cur-lg">
                  Discover how we help enterprises solve complex challenges with
                  secure, scalable solutions. Our case studies highlight real
                  business outcomes accelerated delivery, reduced costs,
                  improved reliability, and data-driven growth powered by modern
                  cloud, AI, and platform engineering.
                </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="c-content-wrapper mt-60">
              <div className="c-tab-single active-tab">
                <div className="row vertical-column-gap-lg">
                  {caseStudies.map((caseStudy) => (
                    <div key={caseStudy.id} className="col-12 col-lg-6">
                      <div className="c-study-single">
                        <div className="thumb mb-24">
                          <Link href={`/case-study/${caseStudy.slug}`} className="w-100">
                            <Image
                              src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : "/images/case/one.png"}
                              className="w-100 mh-300"
                              alt={caseStudy.title}
                              width={600}
                              height={400}
                            />
                          </Link>
                        </div>
                        <div className="content">
                          <Link href={`/case-study/${caseStudy.slug}`} className="mb-30 fw-6">
                            {caseStudy.category_name || 'Case Study'}
                          </Link>
                          <h4 className="fw-6 mt-8 text-secondary">
                            <Link href={`/case-study/${caseStudy.slug}`}>
                              {caseStudy.title}
                            </Link>
                          </h4>
                        </div>
                      </div>
                    </div>
                  ))}
                  {caseStudies.length === 0 && (
                    <div className="col-12">
                      <p className="text-center">No case studies found.</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CaseItems;