"use client";
import { cn } from "@/lib/utils";
import { Avatar } from "@/components/avatar";
import { Container } from "@/components/container";
import { avatars } from "@/registry/zippystarter/data/avatars";
import {
  FadeIn,
  FadeInStagger,
} from "@/components/fade-in";

export interface TestimonialSectionProps {
  text: React.ReactNode;
  avatarName: string;
  avatarSubtitle: string;
  avatarSrc?: string;
  className?: string;
}

export function TestimonialSection({
  text = "“Focus were truly professional. Their code is clean, efficient, and scalable. Randy has an eye for design and a knack for solving complex problems with simple solutions. A valuable asset to any team!”",
  avatarName = avatars.johnDoe.avatarName,
  avatarSubtitle = avatars.johnDoe.avatarSubtitle,
  avatarSrc = avatars.johnDoe.avatarSrc,
  className,
}: TestimonialSectionProps) {
  return (
    <Container
      className={cn(
        "@container grid gap-4 gap-y-0 relative mx-auto max-w-7xl",
        className,
      )}
      wrapperClassName="py-16"
    >
      <FadeInStagger>
        <div
          className={cn(
            "grid gap-6 justify-center text-center text-foreground",
            className,
          )}
        >
          {avatarSrc ? (
            <FadeIn>
              <Avatar
                size="xl"
                className="justify-self-center"
                alt={`Photo of ${avatarName}`}
                src={avatarSrc}
              />
            </FadeIn>
          ) : null}
          <FadeIn>
            <p className="text-xl font-display leading-8 @2xl:text-2xl @2xl:leading-10 max-w-[55ch] text-balance">
              {text}
            </p>
          </FadeIn>
          <FadeIn>
            {avatarName ? (
              <p className="inline-flex text-sm @2xl:text-base text-muted-foreground text-balance -mt-2">
                {avatarName}
                {avatarSubtitle ? `, ${avatarSubtitle}` : ""}
              </p>
            ) : null}
          </FadeIn>
        </div>
      </FadeInStagger>
    </Container>
  );
}
Testimonial blocks
