import React from 'react'
import './spots.css'

interface ReviewAuthor { id: string; name: string | null; image: string | null }

interface ReviewCardProps {
  review: {
    id: string
    rating: number
    body: string
    createdAt: string | Date
    author: ReviewAuthor | null
  }
}

function StarRating({ rating }: { rating: number }) {
  return (
    <span aria-label={`${rating} estrelas`} style={{ color: '#F5A623', fontSize: 'var(--ov-fs-sm)', letterSpacing: 1 }}>
      {'★'.repeat(rating)}{'☆'.repeat(5 - rating)}
    </span>
  )
}

export function ReviewCard({ review }: ReviewCardProps) {
  const date = new Date(review.createdAt).toLocaleDateString('pt-PT', {
    year: 'numeric', month: 'long', day: 'numeric',
  })
  return (
    <div className="review-card">
      <div className="review-header">
        <div className="review-author">
          {review.author?.image && (
            <img src={review.author.image} alt={review.author.name ?? 'User'} className="review-avatar" />
          )}
          <span className="review-author-name">{review.author?.name ?? 'Utilizador'}</span>
        </div>
        <StarRating rating={review.rating} />
      </div>
      <p className="review-body">{review.body}</p>
      <time className="review-date" dateTime={new Date(review.createdAt).toISOString()}>{date}</time>
    </div>
  )
}