import React from 'react';

const ArtistPage: React.FC = () => {
  return (
    <div className="container my-5 flex-grow-1">
      <div className="row">
        <div className="col-lg-8 mx-auto">
          <h1 className="display-4 text-punk mb-4">
            <i className="bi bi-person-badge"></i> Гражданская Оборона
          </h1>
          
          {/* Изображение (путь /res/grob.jpg из public) */}
          <div className="text-center mb-5">
            <img 
              src="/res/grob.jpg" 
              alt="Гражданская Оборона" 
              className="img-fluid rounded border border-punk" 
              style={{ maxWidth: '100%', height: 'auto' }}
            />
          </div>
          
          <p className="lead text-punk">
            Здесь можно почитать инфу про исполнителя и перейти на песню
          </p>
          
          <div className="card bg-dark border-punk mb-4">
            <div className="card-body">
              <div className="descriptionForSong">
                <p className="text-light">
                  «Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым. 
                  Коллектив стал одним из самых влиятельных в андеграундной среде.
                </p>
                <p className="text-light">
                  Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая. 
                  Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль.
                </p>
                <p className="text-light">
                  Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно», 
                  «Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны» 
                  остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории 
                  русской рок-музыки.
                </p>
              </div>
            </div>
          </div>
          
          <div className="card bg-dark border-punk">
            <div className="card-body">
              <h3 className="text-punk mb-3">
                <i className="bi bi-music-note-list"></i> Популярные песни:
              </h3>
              <ul className="list-group list-group-flush">
                <li className="list-group-item bg-dark text-punk border-punk">
                  <a href="#" className="text-punk text-decoration-none">
                    <i className="bi bi-file-music me-2"></i> Кайф или больше
                  </a>
                </li>
                <li className="list-group-item bg-dark text-punk border-punk">
                  <a href="#" className="text-punk text-decoration-none">
                    <i className="bi bi-file-music me-2"></i> Зоопарк
                  </a>
                </li>
                <li className="list-group-item bg-dark text-punk border-punk">
                  <a href="#" className="text-punk text-decoration-none">
                    <i className="bi bi-file-music me-2"></i> Новая патриотическая
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArtistPage;