import { Card, CardBody, CardFooter } from "@nextui-org/react";

import type {
  TestimonialContent,
  TestimonialsIntroductionContent,
} from "@/lib/our-community-ghost-content";

function Testimonials({
  content,
  testimonials,
}: {
  content: TestimonialsIntroductionContent;
  testimonials: TestimonialContent[];
}) {
  return (
    <section className="py-12 flex flex-col lg:flex-row xxl:flex-col xxl:max-w-7xl mx-auto">
      <div className="flex flex-col items-start xxl:items-center justify-center w-full lg:w-1/2 xxl:w-full space-y-8">
        <h1 className="text-4xl lg:text-6xl font-black font-inter relative px-8 xxl:px-0">
          {content.title}
        </h1>
        <h2 className="font-noto text-xl mt-4 text-black dark:text-white px-8 pb-4 xxl:px-0 xxl:text-center">
          {content.lead}
        </h2>
      </div>
      <div className="grid grid-cols-1 px-8 mt-4 lg:mt-0 lg:me-16 gap-4 w-full lg:w-2/3 xxl:w-full xxl:mt-8">
        {testimonials.map((item, index) => (
          <Card
            key={index}
            className="font-noto light bg-gray-400/10 dark:bg-white/5 rounded-lg shadow-none p-4 flex flex-col items-center text-center"
          >
            <CardBody className="text-base text-gray-800 dark:text-white">
              <blockquote className="text-lg font-medium font-noto text-gray-700 dark:text-gray-300 before:content-['“'] after:content-['”']">
                {item.testimonial}
              </blockquote>
            </CardBody>
            <CardFooter className="text-sm font-bold text-gray-800 dark:text-white">
              {item.name}
            </CardFooter>
          </Card>
        ))}
      </div>
    </section>
  );
}

export default Testimonials;