import React from 'react';
import './Reviews.css';

// Массив с отзывами пользователей
const reviews = [
  {
    id: 1,
    text: "Очень довольна сервисом и качеством продукции! Кожа стала заметно лучше.",
    author: "Анна Петрова",
    rating: 5
  },
  {
    id: 2,
    text: "Быстрая доставка, приятные цены. Закажу ещё!",
    author: "Ирина Сидорова",
    rating: 4
  },
  {
    id: 3,
    text: "Пользуюсь кремом уже месяц – результат отличный!",
    author: "Мария Иванова",
    rating: 5
  }
];

// Компонент для отображения звездного рейтинга
function StarRating({ rating }) {
  return (
    <span className="star-rating">
      {'★'.repeat(rating)}
      {'☆'.repeat(5 - rating)}
    </span>
  );
}

// Основной компонент отзывов
function Reviews() {
  return (
    <section className="reviews-section">
      <h2>Отзывы пользователей</h2> 
     
      <div className="reviews-list">{/* Перебираем массив отзывов */}
        {reviews.map(review => (
          // Карточка отзыва с уникальным ключом
          <div key={review.id} className="review-card">
            <p className="review-text">"{review.text}"</p> 
            <div className="review-info"> 
              <span className="review-author">{review.author}</span> 
              <StarRating rating={review.rating} /> 
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}


export default Reviews;