import React from "react";

function Packets() {
    return (
        <section class="packets">
            <h2 class="visually-hidden">Виды подписок</h2>
            <ul class="packets__list">
                <li class="packets__item">
                    <table class="packets__table">
                        <tr class="packets__tr">
                            <th class="packets__th">
                                База<br/>
                                <span class="packets__price">1,99 USD</span>
                            </th>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Розовый фильтр</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td packets__td--no">Смайлики</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td packets__td--no">Комментарии</td>
                        </tr>
                    </table>
                </li>
                <li class="packets__item packets__item--shown">
                    <table class="packets__table">
                        <tr class="packets__tr">
                            <th class="packets__th packets__th--bestseller">
                                Стандарт<br/>
                                <span class="packets__price">3,99 USD</span>
                            </th>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Розовый фильтр</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Смайлики</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td packets__td--no">Комментарии</td>
                        </tr>
                    </table>
                </li>
                <li class="packets__item">
                    <table class="packets__table">
                        <tr class="packets__tr">
                            <th class="packets__th">
                                Анлим<br/>
                                <span class="packets__price">9,99 USD</span>
                            </th>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Розовый фильтр</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Смайлики</td>
                        </tr>
                        <tr class="packets__tr">
                            <td class="packets__td">Комментарии</td>
                        </tr>
                    </table>
                </li>
            </ul>
            <div class="packets__point-wrap">
                <button class="packets__point-button"><span class="visually-hidden">Переключить на подписку "База"</span></button>
                <button class="packets__point-button packets__point-button--active"><span class="visually-hidden">Переключить на подписку "Стандарт"</span></button>
                <button class="packets__point-button"><span class="visually-hidden">Переключить на подписку "Анлим"</span></button>
            </div>
            <table class="packets__table packets__table--table">
                <tr class="packets__tr">
                    <th class="packets__th"></th>
                    <th class="packets__th">
                        База<br/>
                        <span class="packets__price">1,99 USD</span>
                    </th>
                    <th class="packets__th packets__th--bestseller">
                        Стандарт<br/>
                        <span class="packets__price">3,99 USD</span>
                    </th>
                    <th class="packets__th">
                        Анлим<br/>
                        <span class="packets__price">9,99 USD</span>
                    </th>
                </tr>
                <tr class="packets__tr">
                    <td class="packets__td packets__td--text">Розовый фильтр</td>
                    <td class="packets__td"></td>
                    <td class="packets__td"></td>
                    <td class="packets__td"></td>
                </tr>
                <tr class="packets__tr">
                    <td class="packets__td packets__td--text">Смайлики</td>
                    <td class="packets__td packets__td--no"></td>
                    <td class="packets__td"></td>
                    <td class="packets__td"></td>
                </tr>
                <tr class="packets__tr">
                    <td class="packets__td packets__td--text">Комментарии</td>
                    <td class="packets__td packets__td--no"></td>
                    <td class="packets__td packets__td--no"></td>
                    <td class="packets__td"></td>
                </tr>
            </table>
        </section>
    )
}

export default Packets;