"use client";
import Image from "next/legacy/image";
import Link from "next/link";
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
import { getImageUrl } from "@/lib/imageUtils";
import one from "@/public/images/case/one.png";

interface RelatedCaseProps {
  slug: string;
}

const RelatedCase = ({ slug }: RelatedCaseProps) => {
  const { caseStudy, loading } = useCaseStudy(slug);

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

  return (
    <section className="pt-120 pb-120 c-study fade-wrapper">
      <div className="container">
        <div className="row">
          <div className="col-12 col-lg-9">
            <h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
              Similar Case Studies
            </h2>
          </div>
        </div>
        <div className="row vertical-column-gap-lg">
          {caseStudy.related_case_studies.slice(0, 2).map((relatedCase) => (
            <div key={relatedCase.id} className="col-12 col-lg-6">
              <div className="c-study-single fade-top">
                <div className="thumb mb-24">
                  <Link href={`/case-study/${relatedCase.slug}`} className="w-100">
                    <div className="parallax-image-wrap">
                      <div className="parallax-image-inner">
                        <Image
                          src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : one}
                          className="w-100 mh-300 parallax-image"
                          alt={relatedCase.title}
                          width={600}
                          height={400}
                        />
                      </div>
                    </div>
                  </Link>
                </div>
                <div className="content">
                  <Link href={`/case-study/${relatedCase.slug}`} className="mb-30 fw-6">
                    {relatedCase.category_name || 'Case Study'}
                  </Link>
                  <h4 className="fw-6 mt-8 text-secondary">
                    <Link href={`/case-study/${relatedCase.slug}`}>
                      {relatedCase.title}
                    </Link>
                  </h4>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default RelatedCase;