---
export interface Props {
  name: string;
  car: string;
  text: string;
  rating: number;
  initial: string;
  color: string;
}

const { name, car, text, rating, initial, color } = Astro.props;
---

<div class="slider-review-card">
  <div class="review-content">
    <!-- Звёзды рейтинга -->
    <div class="rating-stars">
      {[1, 2, 3, 4, 5].map((star) => (
        <svg 
          class={`star-icon ${star <= rating ? 'filled' : 'empty'}`} 
          viewBox="0 0 20 20"
        >
          <path 
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" 
            fill={star <= rating ? 'currentColor' : 'none'}
          />
        </svg>
      ))}
    </div>

    <!-- Текст отзыва -->
    <p class="review-text">"{text}"</p>
  </div>

  <!-- Автор -->
  <div class="review-author">
    <div class={`author-avatar ${color}`}>
      <span>{initial}</span>
    </div>
    <div class="author-info">
      <h4 class="author-name">{name}</h4>
      <p class="author-car">{car}</p>
    </div>
  </div>
</div>

<style>
  .slider-review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
  }

  .review-content {
    margin-bottom: 1.5rem;
  }

  .rating-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
  }

  .star-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: color 0.2s ease;
  }

  .star-icon.filled {
    color: #fbbf24;
  }

  .star-icon.empty {
    color: #d1d5db;
  }

  .review-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
  }

  .review-author {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .author-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
  }

  .author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .author-name {
    color: #1e293b;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    line-height: 1.2;
  }

  .author-car {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0;
  }

  @media (max-width: 768px) {
    .slider-review-card {
      padding: 1.5rem;
      min-height: 260px;
    }

    .review-text {
      font-size: 0.9rem;
    }
  }
</style>
