"use client";

import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { StarRatingDisplay } from "./star-rating-display";
import { formatDistanceToNow } from "date-fns";

interface ReviewCardProps {
  review: {
    id: string;
    rating: number;
    comment: string | null;
    createdAt: Date | string;
    user: {
      id?: string;
      name: string | null;
      image: string | null;
    };
  };
}

export function ReviewCard({ review }: ReviewCardProps) {
  const createdAt = typeof review.createdAt === 'string' 
    ? new Date(review.createdAt) 
    : review.createdAt;

  return (
    <div className="flex gap-4 p-4 bg-card rounded-lg border">
      <Avatar className="h-10 w-10 shrink-0">
        <AvatarImage src={review.user.image || undefined} />
        <AvatarFallback>{review.user.name?.[0] || "U"}</AvatarFallback>
      </Avatar>

      <div className="flex-1 space-y-2">
        <div className="flex items-start justify-between gap-2">
          <div>
            {review.user.id ? (
              <Link 
                href={`/users/${review.user.id}`}
                className="font-medium hover:underline"
              >
                {review.user.name || "Anonymous"}
              </Link>
            ) : (
              <span className="font-medium">
                {review.user.name || "Anonymous"}
              </span>
            )}
            <p className="text-xs text-muted-foreground">
              {formatDistanceToNow(createdAt, { addSuffix: true })}
            </p>
          </div>
          <StarRatingDisplay rating={review.rating} size="sm" />
        </div>

        {review.comment && (
          <p className="text-sm text-muted-foreground leading-relaxed">
            {review.comment}
          </p>
        )}
      </div>
    </div>
  );
}