Testimonial spotlight

import * as React from "react";
import { cn } from "@/lib/utils";

type TestimonialSpotlightProps = React.ComponentProps<"figure"> & {
  /** The quote, as plain text. No quote marks: the layout says it is a quote. */
  quote: string;
  /** Who said it. */
  name: string;
  /** Their role, one short line. */
  role?: string;
  /** Quote scale. "sm" fits a card or narrow column. */
  size?: "sm" | "default";
  /** Optional slot under the name, for example a logo or a link to the case study. */
  children?: React.ReactNode;
};

const quoteSize = {
  sm: "text-lg sm:text-xl",
  default: "text-2xl sm:text-3xl lg:text-4xl",
};

/**
 * One quote, set large and centered. Use it when a single voice carries a section.
 * Server component.
 */
export function TestimonialSpotlight({
  quote,
  name,
  role,
  size = "default",
  children,
  className,
  ...props
}: TestimonialSpotlightProps) {
  return (
    <figure
      data-slot="testimonial-spotlight"
      className={cn("m-0 mx-auto flex max-w-3xl flex-col items-center gap-6 px-4 py-10 text-center", className)}
      {...props}
    >
      <blockquote className={cn("m-0 leading-snug font-medium tracking-tight text-balance", quoteSize[size])}>
        {quote}
      </blockquote>
      <figcaption className="flex flex-col items-center gap-0.5">
        <span className="text-sm font-medium text-foreground">{name}</span>
        {role && <span className="text-xs text-muted-foreground">{role}</span>}
        {children && <div className="mt-3">{children}</div>}
      </figcaption>
    </figure>
  );
}