import { Star, MessageSquare } from 'lucide-react';
import { Avatar } from '../ui/Avatar';
import type { RentalReview } from '../../types/rental';
import { formatDate } from '../../utils/format';

interface ReviewCardProps {
  review: RentalReview;
}

export function ReviewCard({ review }: ReviewCardProps) {
  const tenantName = review.tenant?.fullName ?? 'Anonymous';
  const tenantAvatar = review.tenant?.avatar;

  return (
    <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
      {/* Header */}
      <div className="flex items-start gap-3">
        <Avatar
          src={tenantAvatar}
          name={tenantName}
          size="sm"
        />
        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between">
            <p className="text-sm font-semibold text-gray-900 truncate">
              {tenantName}
            </p>
            <span className="text-xs text-gray-400 flex-shrink-0 ml-2">
              {formatDate(review.createdAt)}
            </span>
          </div>

          {/* Stars */}
          <div className="flex items-center gap-0.5 mt-0.5">
            {Array.from({ length: 5 }, (_, i) => (
              <Star
                key={i}
                className={`w-3.5 h-3.5 ${
                  i < review.rating
                    ? 'fill-amber-400 text-amber-400'
                    : 'text-gray-200'
                }`}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Comment */}
      {review.comment && (
        <p className="mt-3 text-sm text-gray-600 leading-relaxed">
          {review.comment}
        </p>
      )}

      {/* Landlord Response */}
      {review.landlordResponse && (
        <div className="mt-3 bg-gray-50 rounded-xl p-3 border border-gray-100">
          <div className="flex items-center gap-1.5 mb-1.5">
            <MessageSquare className="w-3.5 h-3.5 text-primary-500" />
            <span className="text-xs font-semibold text-primary-600">Landlord Response</span>
          </div>
          <p className="text-sm text-gray-600 leading-relaxed">
            {review.landlordResponse}
          </p>
        </div>
      )}
    </div>
  );
}
