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

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="related-case-studies luxury-related pt-120 pb-120">
      <div className="container">
        <div className="row">
          <div className="col-12">
            <div className="section-header">
              <h2 className="section-title">Related Case Studies</h2>
              <p className="section-subtitle">Explore similar projects and success stories</p>
            </div>
          </div>
        </div>
        <div className="row vertical-column-gap-lg">
          {caseStudy.related_case_studies.slice(0, 3).map((relatedCase) => (
            <div key={relatedCase.id} className="col-12 col-md-6 col-lg-4">
              <div className="related-case-card">
                <Link href={`/case-study/${relatedCase.slug}`} className="case-link">
                  <div className="case-image-wrapper">
                    <Image
                      src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : "/images/case/one.png"}
                      className="case-image"
                      alt={relatedCase.title}
                      width={400}
                      height={300}
                    />
                    <div className="image-overlay">
                      <i className="fa-solid fa-arrow-right"></i>
                    </div>
                  </div>
                  <div className="case-content">
                    {relatedCase.category_name && (
                      <span className="case-category">
                        {relatedCase.category_name}
                      </span>
                    )}
                    <h3 className="case-title">{relatedCase.title}</h3>
                    {relatedCase.excerpt && (
                      <p className="case-excerpt">{relatedCase.excerpt}</p>
                    )}
                  </div>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default RelatedCase;