import type { CompanyReview } from "@/lib/medusa/company-reviews";

type Props = {
  reviews: CompanyReview[];
};

function Stars({ rating }: { rating: number }) {
  return (
    <span aria-hidden="true" className="text-[var(--accent)]">
      {"★".repeat(Math.round(rating))}
      <span className="text-[var(--line)]">{"★".repeat(5 - Math.round(rating))}</span>
    </span>
  );
}

export function CompanyReviewsSection({ reviews }: Props) {
  if (reviews.length === 0) {
    return null;
  }

  return (
    <section className="space-y-8">
      <h2 className="font-serif text-4xl text-[var(--foreground)] md:text-5xl">Ce que nos clients en disent</h2>

      <div className="grid gap-4 md:grid-cols-3">
        {reviews.slice(0, 6).map((review) => (
          <article
            key={review.id}
            className="reveal-soft space-y-3 rounded-[1.6rem] border border-[var(--accent-3)] bg-[linear-gradient(160deg,#ffffff_0%,#fff3f3_100%)] p-5 shadow-[0_12px_26px_rgba(49,18,18,0.06)]"
          >
            <Stars rating={review.rating} />
            <p className="text-sm leading-relaxed text-[var(--muted)]">&laquo;&nbsp;{review.body}&nbsp;&raquo;</p>
            <p className="text-xs font-semibold uppercase tracking-[0.1em] text-[var(--accent-3)]">{review.author_name}</p>
          </article>
        ))}
      </div>
    </section>
  );
}