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

export function ReviewCard({ review }: { review: GoogleReview }) {
  const author = review.authorUri ? (
    <a
      href={review.authorUri}
      target="_blank"
      rel="noopener noreferrer"
      className="font-semibold text-chocolat hover:text-gaufre"
    >
      {review.authorName}
    </a>
  ) : (
    <span className="font-semibold text-chocolat">{review.authorName}</span>
  );

  return (
    <article className="flex h-full w-full flex-col rounded-3xl border border-chocolat/10 bg-white/80 p-5 sm:p-6">
      <div className="flex items-start gap-3">
        {review.authorPhotoUri ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={review.authorPhotoUri}
            alt=""
            width={44}
            height={44}
            className="h-11 w-11 shrink-0 rounded-full object-cover"
            loading="lazy"
            referrerPolicy="no-referrer"
          />
        ) : (
          <div
            className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-gaufre/20 text-sm font-bold text-chocolat"
            aria-hidden
          >
            {review.authorName.charAt(0).toUpperCase()}
          </div>
        )}
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            {author}
            {review.relativeTime ? (
              <span className="text-sm text-muted">· {review.relativeTime}</span>
            ) : null}
          </div>
          <ReviewStars rating={review.rating} size="sm" />
        </div>
      </div>
      <p className="mt-4 flex-1 text-sm leading-relaxed text-chocolat/90">
        {review.text}
      </p>
    </article>
  );
}
