import type { GoogleReviewsSummary } from "@/lib/google-reviews";
import { ReviewStars } from "./ReviewStars";
import { ReviewsCarousel } from "./ReviewsCarousel";

function formatRating(rating: number) {
  return rating.toLocaleString("fr-FR", {
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
  });
}

function formatReviewCount(count: number) {
  return count.toLocaleString("fr-FR");
}

export function ReviewsSection({ data }: { data: GoogleReviewsSummary }) {
  const { rating, reviewCount, googleMapsUri, reviews } = data;

  return (
    <section
      id="avis"
      className="scroll-mt-24 border-t border-chocolat/8 bg-cream px-4 py-20 sm:px-6"
    >
      <div className="mx-auto max-w-6xl">
        <div className="mb-12 text-center">
          <h2 className="text-3xl font-bold text-chocolat sm:text-4xl">
            Avis clients
          </h2>
          <p className="mx-auto mt-3 max-w-2xl text-muted">
            Ce que disent nos clients sur Google.
          </p>
          {rating != null ? (
            <div className="mt-5 flex flex-wrap items-center justify-center gap-3">
              <span className="text-3xl font-bold text-chocolat">
                {formatRating(rating)}
              </span>
              <ReviewStars rating={rating} />
              {reviewCount != null ? (
                <span className="text-sm text-muted">
                  ({formatReviewCount(reviewCount)} avis)
                </span>
              ) : null}
            </div>
          ) : null}
        </div>

        <ReviewsCarousel reviews={reviews} />

        <div className="mt-10 flex flex-col items-center gap-3 text-center">
          <a
            href={googleMapsUri}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 rounded-full bg-gaufre px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_24px_-8px_rgba(243,156,18,0.55)] transition hover:bg-gaufre/90"
          >
            Voir tous les avis sur Google
          </a>
        </div>
      </div>
    </section>
  );
}