import { Quote, Star } from "lucide-react";
import SectionHeader from "@/components/home/SectionHeader";
import { toneClasses } from "@/components/home/FeaturesSection";
import type { getHomeData } from "@/data/home.data";

export default function TestimonialsSection({
  subtitle,
  testimonials,
  title,
  trustCards,
}: {
  subtitle: string;
  testimonials: ReturnType<typeof getHomeData>["testimonials"];
  title: string;
  trustCards: ReturnType<typeof getHomeData>["trustCards"];
}) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-7 xl:px-8">
      <SectionHeader
        title={title}
        subtitle={subtitle}
      />

      <div className="mt-4 grid gap-4 lg:grid-cols-[1fr_1fr_1fr_0.9fr]">
        {testimonials.map((item) => (
          <article key={item.name} className="rounded-xl border border-[#e5eaf4] bg-white p-4 shadow-[0_4px_12px_rgba(51,66,116,0.035)]">
            <div className="flex items-center justify-between">
              <Quote size={22} fill="currentColor" className="text-[#9da8ff]" />
              <div className="flex text-[#ffb12b]">
                {Array.from({ length: 5 }).map((_, index) => <Star key={index} size={11} fill="currentColor" strokeWidth={0} />)}
              </div>
            </div>
            <p className="mt-3 min-h-[69px] text-[12px] italic leading-[1.75] text-[#697693]">&ldquo;{item.text}&rdquo;</p>
            <div className="mt-3 flex items-center gap-2.5">
              <div className={`grid h-9 w-9 place-items-center rounded-full bg-gradient-to-br text-[9px] font-extrabold text-[#38405d] ${item.gradient ?? ""}`}>
                {item.initials}
              </div>
              <div>
                <h3 className="text-[12px] font-extrabold text-[#283353]">{item.name}</h3>
                <p className="mt-0.5 text-[10px] text-[#8a95a8]">{item.role}</p>
              </div>
            </div>
          </article>
        ))}

        <div className="space-y-2">
          {trustCards.map((card) => {
            const Icon = card.icon;
            return (
              <article key={card.title} className="flex min-h-[54px] items-center gap-2.5 rounded-[11px] border border-[#e5eaf4] bg-white px-3 py-2 shadow-[0_4px_12px_rgba(51,66,116,0.03)]">
                <div className={`grid h-8 w-8 shrink-0 place-items-center rounded-full ${toneClasses[card.tone]}`}>
                  <Icon size={16} strokeWidth={1.8} />
                </div>
                <div>
                  <h3 className="text-[12px] font-extrabold text-[#5460c8]">{card.title}</h3>
                  <p className="mt-0.5 text-[10px] text-[#8a95a8]">{card.desc}</p>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}