"use client";
import { Card, CardBody, CardFooter } from "@nextui-org/react";
import Image from "next/image";

import { Testimonial } from "@/components/pages/client/services/services";
import TestimonialImage from "@/public/client/testimonial.webp";

type TestimonialsProps = {
  testimonials: Testimonial[];
  title?: string;
  subtitle?: string;
};

function Testimonials({
  testimonials,
  title = "Our happy customers",
  subtitle = "Don't just take our word for it - see what our happy clients have to say about their experiences with us.",
}: TestimonialsProps) {
  return (
    <section>
      <h2 className="text-3xl md:text-5xl lg:text-7xl font-black font-inter mb-4 max-w-4xl mx-12 lg:mx-auto text-center">
        {title}
      </h2>
      <p className="font-noto text-xl text-gray-700 dark:text-gray-200 mx-12 lg:mx-36 mt-1 text-center">
        {subtitle}
      </p>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16 px-12 md:px-36 py-20">
        {testimonials.map((testimonial, index) => (
          <Card
            key={index}
            className="p-6 bg-gray-400/10 dark:bg-white/5 shadow-none"
          >
            <CardBody className="p-0 pb-6">
              <blockquote className="text-lg font-medium font-noto text-gray-700 dark:text-gray-300 before:content-['“'] after:content-['”']">
                {testimonial.testimonial}
              </blockquote>
            </CardBody>
            <CardFooter className="flex items-center justify-between p-0 pt-6 rounded-none">
              <span className="text-sm font-noto font-semibold text-gray-900 dark:text-white">
                {testimonial.companyName || testimonial.participantName}
              </span>
              {testimonial.logo && (
                <div className="size-20 flex items-center justify-end">
                  <Image
                    alt="" // decorative purposes.
                    className="h-full object-contain filter grayscale dark:invert"
                    height={120}
                    src={testimonial.logo}
                    width={120}
                  />
                </div>
              )}
            </CardFooter>
          </Card>
        ))}
      </div>
      <div className="w-full mt-8 mx-auto">
        <Image
          alt="Two women are laughing together against a light blue background, looking bright and smiling."
          className="object-cover h-[200px] md:h-[300px] lg:h-[500px]"
          loading="eager"
          src={TestimonialImage}
        />
      </div>
    </section>
  );
}

export default Testimonials;