"use client";

import { Star } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CarReview } from "@/lib/types";

function formatReviewDate(iso: string): string {
  try {
    return new Date(iso).toLocaleDateString("en-IN", {
      day: "numeric",
      month: "short",
      year: "numeric",
    });
  } catch {
    return "";
  }
}

export default function ReviewCard({ review }: { review: CarReview }) {
  return (
    <article className="rounded-2xl border border-gray-100 bg-gradient-to-br from-white to-gray-50/80 p-4 sm:p-5 min-w-0">
      <div className="flex flex-wrap items-center gap-2 mb-2">
        <div className="flex items-center gap-0.5" aria-label={`${review.rating} out of 5 stars`}>
          {[1, 2, 3, 4, 5].map((s) => (
            <Star
              key={s}
              className={cn(
                "w-3.5 h-3.5 sm:w-4 sm:h-4",
                s <= Math.round(review.rating)
                  ? "text-yellow-400 fill-yellow-400"
                  : "text-gray-200 fill-gray-200",
              )}
            />
          ))}
        </div>
        <span className="text-xs font-bold text-gray-500">{review.rating.toFixed(1)}</span>
        {review.createdAt && (
          <span className="text-[10px] text-gray-400 ml-auto">
            {formatReviewDate(review.createdAt)}
          </span>
        )}
      </div>
      <h3 className="text-sm sm:text-base font-black text-gray-900 mb-1 break-words">
        {review.title}
      </h3>
      <p className="text-xs sm:text-sm text-gray-500 font-semibold mb-2">{review.author}</p>
      <p className="text-sm text-gray-600 leading-relaxed break-words">{review.text}</p>
    </article>
  );
}