import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { Review } from "../..";
import { cn } from "@/lib/utils";
import { useId } from "react";

interface ReviewsProps extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  reviews: React.ComponentProps<typeof Review>[];
}

export default function Reviews({ reviews, title, ...props }: ReviewsProps) {
  const reviewId = useId();
  return (
    <div {...props}>
      {title && (
        <Typography
          as="h3"
          weight="bold"
          font="inter"
          align="center"
          {...title}
          className={cn(
            "text-[22px]/[28px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      {!!reviews.length && (
        <div className={cn("w-full flex flex-col items-center gap-4 mt-8")}>
          {reviews.map((review, index) => (
            <Review key={`${reviewId}-${index}`} {...review} />
          ))}
        </div>
      )}
    </div>
  );
}
