import StarRating from './StarRating';

interface ReviewCommentProps {
  review: {
    id: string;
    rating: number;
    title?: string;
    comment: string;
    user: { name: string; avatar_url?: string };
    created_at: string;
    images?: string[];
  };
}

export default function ReviewComment({ review }: ReviewCommentProps) {
  return (
    <div className="bg-white rounded-xl p-6 shadow-sm">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
            {review.user.avatar_url ? (
              <img src={review.user.avatar_url} alt="" className="w-full h-full object-cover" />
            ) : (
              <span className="text-gray-500 font-medium">{review.user.name[0]}</span>
            )}
          </div>
          <div>
            <p className="font-medium">{review.user.name}</p>
            <StarRating rating={review.rating} size={14} />
          </div>
        </div>
        <span className="text-sm text-gray-500">
          {new Date(review.created_at).toLocaleDateString('th-TH', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
          })}
        </span>
      </div>
      
      {review.title && (
        <h4 className="font-medium mb-2">{review.title}</h4>
      )}
      
      <p className="text-gray-600 mb-4">{review.comment}</p>
      
      {review.images?.length > 0 && (
        <div className="flex gap-2">
          {review.images.map((img, i) => (
            <img
              key={i}
              src={img}
              alt=""
              className="w-20 h-20 object-cover rounded-lg"
            />
          ))}
        </div>
      )}
    </div>
  );
}