import React from "react";

function Com() {
    return (
        <section class="com">
            <h2 class="visually-hidden">Комментарии</h2>
            <ul class="com__but-list">
                <li class="com__but-item">
                    <button class="com__switch com__switch--left">
                        <span class="visually-hidden">Переключить на предыдущий комментарий</span>
                    </button>
                </li>
                <li class="com__but-item">
                    <button class="com__switch com__switch--right">
                        <span class="visually-hidden">Переключить на следующий комментарий</span>
                    </button>
                </li>
            </ul>
            <ul class="com__list">
                <li class="com__item com__item--shown">
                    <b class="com__b">Николай Петров</b>
                    <span class="com__span">25 лет, водитель трамвая</span>
                    <p class="com__text">«Это приложение перевернуло мой мир и позволило по-новому взглянуть на привычные серые вещи! А еще я познакомился со своей будущей женой в комментариях к выложенной фотографии!»</p>
                </li>
                <li class="com__item">
                    <b class="com__b">Вилли Вонка</b>
                    <span class="com__span">29 лет, кондитер</span>
                    <p class="com__text">«Люблю всякие розовые штуки.»</p>
                </li>
                <li class="com__item">
                    <b class="com__b">Арнольд Шварценеггерович</b>
                    <span class="com__span">321 лет, киборг убийца</span>
                    <p class="com__text">«Пришел в ваш мир что бы убить Сару Коннор но случайно нашел это приложение, теперь желание убивать отпало. Спасибо вам большое.»</p>
                </li>
            </ul>
            <div class="com__point-wrap">
                <button class="com__point-button com__point-button--active"><span class="visually-hidden">Первый комментарий</span></button>
                <button class="com__point-button"><span class="visually-hidden">Второй комментарий</span></button>
                <button class="com__point-button"><span class="visually-hidden">Третий комментарий</span></button>
            </div>
        </section>
    )
}

export default Com;