---
import { markdownToHtml } from "@/lib/markdown";
import StarRating from "./subcomponents/StarRating.astro";

interface Props {
    reviews: ReviewListComponent;
}

const reviews = Astro.props.reviews;

let totalStars: number = 0;
const totalReviews: number = reviews.reviews.length;

reviews.reviews.forEach((review) => {
    totalStars = totalStars + review.stars;
});

const averageStars = Math.round((totalStars / totalReviews) * 10) / 10;
const reviewsToShow = reviews.reviews.slice(0, 5);
---

<div
    id={`reviews-${reviews.id}`}
    class="flex lg:flex-row flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
>
    <div class="flex flex-col lg:gap-5 gap-2.25 lg:min-w-[32.5%]">
        <div class="flex flex-col">
            <h2 class="text-3xl font-bold">{reviews.title}</h2>
            <div>{reviews.text}</div>
        </div>

        <div class="flex flex-col gap-1.5 text-lg">
            <StarRating size="big" stars={averageStars} />
            <p class="italic">{averageStars}</span> stars out of {totalReviews} {totalReviews === 1 ? "review" : "reviews"}.</p>
        </div>
    </div>

    <div class="flex flex-col gap-6.5">
        { reviewsToShow.map((review) => (
            <div class="flex flex-col justify-center gap-3 bg-neutral-100 py-4 px-5.5 rounded-2xl shadow-sm">
                <div class="flex flex-col justify-center gap-1.25">
                    <h4 class="text-2xl font-semibold">{review.name}</h4>
                    <div>
                        <StarRating size="small" stars={review.stars} />
                    </div>
                </div>

                <div set:html={markdownToHtml(review.review)}>
                </div>
            </div>
        )) }
    </div>
</div>