import type { Review } from "@/lib/reviews";

export function TestimonialCard({
  t,
  featured = false,
}: {
  t: Review | { quote: string; by: string; org?: string };
  featured?: boolean;
}) {
  return (
    <figure
      className={`relative border-2 border-neutral-900 ${
        featured ? "bg-violet-700 text-white" : "bg-white text-neutral-900"
      } p-8 md:p-10`}
    >
      {featured && (
        <div className="absolute -left-3 -top-3 bg-yellow-300 px-3 py-1 text-[10px] font-black uppercase tracking-[0.2em] text-neutral-900">
          Featured
        </div>
      )}
      <svg
        aria-hidden
        className={`size-10 ${featured ? "text-yellow-300" : "text-violet-700"}`}
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <path d="M7.17 6C4.87 6 3 7.87 3 10.17v7.5H10.5v-7.5H6.33c0-1.01.82-1.83 1.84-1.83h1.5V6H7.17Zm9 0C13.87 6 12 7.87 12 10.17v7.5h7.5v-7.5h-4.17c0-1.01.82-1.83 1.84-1.83h1.5V6h-2.5Z" />
      </svg>
      <blockquote
        className={`mt-5 text-pretty font-semibold leading-snug ${
          featured ? "text-xl md:text-2xl" : "text-lg md:text-xl"
        }`}
      >
        &ldquo;{t.quote}&rdquo;
      </blockquote>
      <figcaption
        className={`mt-8 flex items-center gap-3 border-t-2 ${
          featured ? "border-white/20" : "border-neutral-900"
        } pt-5`}
      >
        <span
          className={`inline-flex size-10 items-center justify-center text-sm font-black ${
            featured ? "bg-yellow-300 text-neutral-900" : "bg-neutral-900 text-white"
          }`}
        >
          {t.by
            .split(" ")
            .map((w) => w[0])
            .slice(0, 2)
            .join("")}
        </span>
        <span>
          <span className="block text-sm font-black uppercase tracking-wider">{t.by}</span>
          {t.org && (
            <span
              className={`block text-xs ${
                featured ? "text-white/75" : "text-neutral-500"
              }`}
            >
              {t.org}
            </span>
          )}
        </span>
      </figcaption>
    </figure>
  );
}