import type { ReactNode } from "react";
import type { StaticImageData } from "next/image";
import TestimonialContent from "./TestimonialContent";
import CmsPreviewImage from "@/components/preview/CmsPreviewImage";

interface TestimonialCardProps {
  imageSrc: string | StaticImageData;
  imageAlt: string;
  itemIndex: number;
  text: ReactNode;
  author: ReactNode;
  imageFirst?: boolean;
}

export default async function TestimonialCard({
  imageSrc,
  imageAlt,
  itemIndex,
  text,
  author,
  imageFirst = true,
}: TestimonialCardProps) {
  const image = (heightClasses: string) => (
    <div className={`relative w-full rounded-[24px] overflow-hidden ${heightClasses}`}>
      <CmsPreviewImage
        sectionName="customer_reviews"
        inputNameEn="reviews"
        itemIndex={itemIndex}
        itemField="image"
        initialSrc={imageSrc}
        alt={imageAlt}
        fill
        className="object-cover"
      />
    </div>
  );

  return (
    <div className="flex flex-col gap-5 lg:gap-10">
      {imageFirst ? (
        <>
          {image("h-[250px] md:h-[300px] lg:h-[375px]")}
          <TestimonialContent text={text} author={author} />
        </>
      ) : (
        <>
          <TestimonialContent
            text={text}
            author={author}
            className="order-2 sm:order-1"
          />
          <div className="order-1 lg:order-2">
            {image("h-[250px] md:h-[300px] lg:h-[355px]")}
          </div>
        </>
      )}
    </div>
  );
}