import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useInitials } from '@/hooks/use-initials';
import { getImageUrl } from '@/utils/getImageUrl';

export type ReviewCardData = {
  name: string;
  title: string;
  quote: string;
  image?: string;
};

export type ReviewProps = {
  cards?: ReviewCardData[];
};

export default function ReviewSection({ cards }: ReviewProps) {
  const getInitials = useInitials();
  const list = cards ?? [];
  const duplicatedCards = [...list, ...list];

  return (
    <section className="bg-white py-10 font-inter">
      <div className="container">
        <div className="group overflow-hidden">
          <div className="animate-marquee flex w-max gap-4 px-10 group-hover:paused">
            {duplicatedCards.map((card, i) => (
              <div
                key={i}
                className="review-card max-w-lg cursor-pointer rounded-2xl p-8"
              >
                <div className="mb-4 flex items-center gap-4">
                  <Avatar className="size-18 overflow-hidden rounded-full">
                    <AvatarImage
                      src={getImageUrl(card.image)}
                      alt={card.name}
                    />
                    <AvatarFallback className="rounded-lg bg-neutral-200 text-2xl font-medium text-black">
                      {getInitials(card.name)}
                    </AvatarFallback>
                  </Avatar>

                  <div className="review-title">
                    <h3 className="mb-1 text-xl font-semibold">{card.name}</h3>
                    <p>{card.title}</p>
                  </div>
                </div>

                <p className="text-sm">
                  My vision came alive effortlessly. Their blend of casual and
                  professional approach made the process a breeze. Creativity
                  flowed, and the results were beyond my expectations.
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}