import { BlogCard } from '../components/BlogCard'
import '../styles/filters.css'
import '../styles/pagination.css'
import '../styles/search.css'
import '../styles/styles.css'
import placeholder from '../assets/img/DEGMods Placeholder Img.png'

export const BlogsPage = () => {
  return (
    <div className='InnerBodyMain'>
      <div className='ContainerMain'>
        <div className='IBMSecMainGroup IBMSecMainGroupAlt'>
          <div className='IBMSecMain'>
            <div className='SearchMainWrapper'>
              <div className='IBMSMTitleMain'>
                <h2 className='IBMSMTitleMainHeading'>Blogs (WIP)</h2>
              </div>
              <div className='SearchMain'>
                <div className='SearchMainInside'>
                  <div className='SearchMainInsideWrapper'>
                    <input type='text' className='SMIWInput' />
                    <button className='btn btnMain SMIWButton' type='button'>
                      <svg
                        xmlns='http://www.w3.org/2000/svg'
                        viewBox='0 0 512 512'
                        width='1em'
                        height='1em'
                        fill='currentColor'
                      >
                        <path d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className='IBMSecMain'>
            <div className='FiltersMain'>
              <div className='FiltersMainElement'>
                <div className='dropdown dropdownMain'>
                  <button
                    className='btn dropdown-toggle btnMain btnMainDropdown'
                    aria-expanded='false'
                    data-bs-toggle='dropdown'
                    type='button'
                  >
                    Latest
                  </button>
                  <div className='dropdown-menu dropdownMainMenu'>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Latest
                    </a>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Oldest
                    </a>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Best Rated
                    </a>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Worst Rated
                    </a>
                  </div>
                </div>
              </div>
              <div className='FiltersMainElement'>
                <div className='dropdown dropdownMain'>
                  <button
                    className='btn dropdown-toggle btnMain btnMainDropdown'
                    aria-expanded='false'
                    data-bs-toggle='dropdown'
                    type='button'
                  >
                    Hide NSFW
                  </button>
                  <div className='dropdown-menu dropdownMainMenu'>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Hide NSFW
                    </a>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Show NSFW
                      <br />
                    </a>
                    <a className='dropdown-item dropdownMainMenuItem' href='#'>
                      Only show NSFW
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className='IBMSecMain IBMSMListWrapper'>
            <div className='IBMSMList'>
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
              <BlogCard backgroundLink={placeholder} />
            </div>
          </div>

          <div className='IBMSecMain'>
            <div className='PaginationMain'>
              <div className='PaginationMainInside'>
                <a
                  className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
                  href='#'
                >
                  <i className='fas fa-chevron-left'></i>
                </a>
                <div className='PaginationMainInsideBoxGroup'>
                  <a className='PaginationMainInsideBox PMIBActive' href='#'>
                    <p>1</p>{' '}
                  </a>
                  <a className='PaginationMainInsideBox' href='#'>
                    <p>2</p>{' '}
                  </a>
                  <a className='PaginationMainInsideBox' href='#'>
                    <p>3</p>
                  </a>
                  <p className='PaginationMainInsideBox PMIBDots'>...</p>
                  <a className='PaginationMainInsideBox' href='#'>
                    <p>8</p>
                  </a>
                </div>
                <a
                  className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
                  href='#'
                >
                  <i className='fas fa-chevron-right'></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}