import { Mountain, Quote } from "lucide-react";
import { formatDate } from "@/lib/formatters/date";
import RatingStarsDisplay from "./RatingStarsDisplay";
import type { PublicRating } from "@/types/rating";
import styles from "./RatingComponents.module.css";

interface Props {
  rating: PublicRating;
}

export default function RatingCard({ rating }: Props) {
  return (
    <article className={styles.testimonialCard}>
      <div className={styles.testimonialTop}>
        <RatingStarsDisplay value={rating.score} size={15} />
        <Quote size={22} className={styles.testimonialQuoteIcon} aria-hidden />
      </div>

      {rating.review && <p className={styles.testimonialText}>&ldquo;{rating.review}&rdquo;</p>}

      <div className={styles.testimonialFooter}>
        <div className={styles.testimonialAvatar} aria-hidden="true">
          {rating.customer_name.charAt(0).toUpperCase()}
        </div>
        <div className={styles.testimonialIdentity}>
          <p className={styles.testimonialName}>{rating.customer_name}</p>
          {rating.mountain && (
            <p className={styles.testimonialMeta}>
              <Mountain size={12} aria-hidden />
              <span>{rating.mountain}</span>
              {rating.posted_at && <span>· {formatDate(rating.posted_at)}</span>}
            </p>
          )}
        </div>
      </div>
    </article>
  );
}