import '../styles/author.css'
import '../styles/innerPage.css'
import '../styles/socialPosts.css'

export const ProfileSection = () => {
  return (
    <div className='IBMSMSplitMainSmallSide'>
      <div className='IBMSMSplitMainSmallSideSec'>
        <div className='IBMSMSMSSS_Author'>
          <div className='IBMSMSMSSS_Author_Top'>
            <div className='IBMSMSMSSS_Author_Top_Left'>
              <a
                className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
                href='profile.html'
              >
                <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
                  <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
                    <div className='IBMSMSMSSS_Author_Top_PPWrapper'>
                      <div
                        className='IBMSMSMSSS_Author_Top_PP'
                        style={{
                          background:
                            "url('assets/img/media-cache%20(4).png') center / cover no-repeat"
                        }}
                      ></div>
                    </div>
                  </div>
                  <div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
                    <div className='IBMSMSMSSS_Author_TopWrapper'>
                      <p className='IBMSMSMSSS_Author_Top_Name'>
                        {author.name}
                      </p>
                      <p className='IBMSMSMSSS_Author_Top_Handle'>
                        {author.handle}
                      </p>
                    </div>
                  </div>
                </div>
              </a>
              <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
                <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
                  <p
                    id='SiteOwnerAddress'
                    className='IBMSMSMSSS_Author_Top_Address'
                  >
                    {author.address}
                  </p>
                </div>
                <div className='IBMSMSMSSS_Author_Top_IconWrapper'>
                  <div
                    id='copySiteOwnerAddress'
                    className='IBMSMSMSSS_Author_Top_IconWrapped'
                  >
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      viewBox='0 0 512 512'
                      width='1em'
                      height='1em'
                      fill='currentColor'
                      className='IBMSMSMSSS_Author_Top_Icon'
                    >
                      <path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
                    </svg>
                  </div>
                  <div className='IBMSMSMSSS_Author_Top_IconWrapped IBMSMSMSSS_Author_Top_IconWrappedQR'>
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      viewBox='-32 0 512 512'
                      width='1em'
                      height='1em'
                      fill='currentColor'
                      className='IBMSMSMSSS_Author_Top_Icon'
                    >
                      <path d='M144 32C170.5 32 192 53.49 192 80V176C192 202.5 170.5 224 144 224H48C21.49 224 0 202.5 0 176V80C0 53.49 21.49 32 48 32H144zM128 96H64V160H128V96zM144 288C170.5 288 192 309.5 192 336V432C192 458.5 170.5 480 144 480H48C21.49 480 0 458.5 0 432V336C0 309.5 21.49 288 48 288H144zM128 352H64V416H128V352zM256 80C256 53.49 277.5 32 304 32H400C426.5 32 448 53.49 448 80V176C448 202.5 426.5 224 400 224H304C277.5 224 256 202.5 256 176V80zM320 160H384V96H320V160zM352 448H384V480H352V448zM448 480H416V448H448V480zM416 288H448V416H352V384H320V480H256V288H352V320H416V288z'></path>
                    </svg>
                  </div>
                  <a
                    className='IBMSMSMSSS_Author_Top_IconWrapped'
                    href='https://primal.net/p/npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r'
                    target='_blank'
                    rel='noopener noreferrer'
                  >
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      viewBox='-32 0 512 512'
                      width='1em'
                      height='1em'
                      fill='currentColor'
                      className='IBMSMSMSSS_Author_Top_Icon'
                    >
                      <path d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
            <div className='IBMSMSMSSS_Author_Top_Details'>
              <p className='IBMSMSMSSS_Author_Top_Bio'>{author.bio}</p>
              <div
                id='OwnerFollowLogin'
                className='IBMSMSMSSS_Author_Top_NostrLinks'
                style={{ display: 'flex' }}
              ></div>
            </div>
          </div>
          <button className='btn btnMain' type='button'>
            Follow
          </button>
        </div>
      </div>
      <div className='IBMSMSplitMainSmallSideSec'>
        <div className='IBMSMSMSSS_ShortPosts'>
          {posts.map((post, index) => (
            <a
              key={'post' + index}
              className='IBMSMSMSSS_ShortPostsPostLink'
              href={post.link}
            >
              <div className='IBMSMSMSSS_ShortPostsPost'>
                <div className='IBMSMSMSSS_ShortPostsPost_Top'>
                  <p className='IBMSMSMSSS_ShortPostsPost_TopName'>
                    {post.name}
                  </p>
                  <div className='IBMSMSMSSS_ShortPostsPost_TopLink'>
                    <svg
                      xmlns='http://www.w3.org/2000/svg'
                      viewBox='-32 0 512 512'
                      width='1em'
                      height='1em'
                      fill='currentColor'
                      className='IBMSMSMSSS_ShortPostsPost_TopLinkIcon'
                      style={{ width: '100%', height: '100%' }}
                    >
                      <path d='M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z'></path>
                    </svg>
                  </div>
                </div>
                <div className='IBMSMSMSSS_ShortPostsPost_Bottom'>
                  <p>{post.content}</p>
                  {post.imageUrl && (
                    <div
                      className='IBMSMSMSSS_ShortPostsPost_BottomImg'
                      style={{
                        background: `linear-gradient(0deg, #232323 5%, rgba(255, 255, 255, 0)), url("${post.imageUrl}") top / cover no-repeat`
                      }}
                    ></div>
                  )}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  )
}

interface Author {
  name: string
  handle: string
  address: string
  bio: string
}

const author: Author = {
  name: 'Freakoverse',
  handle: 'freakoverse@degmods.com',
  address: 'npub18n4ysp43ux5c98fs6h9c57qpr4p8r3j8f6e32v0vj8egzy878aqqyzzk9r',
  bio: `I guess I'm one of those #vtubers . Having fun talking about general topics, vrchat/similar, and games. Also #indiedev #gamedev You can call me: Freak فْرِيكٌ ���リク (still learning Nihongo). #envtuber #podcast #gaming #gamedev`
}

interface Post {
  name: string
  link: string
  content: string
  imageUrl?: string
}

const posts: Post[] = [
  {
    name: 'Freakoverse',
    link: `feed-note.html`,
    content: ` So I know HTML/CSS pretty well and I'm confident with
                                them.\n\n\n\nI also know UI and UX, as
                                well as graphic design (nowhere near pros, but I'm the
                                guy they call when the pro isn't around or when
                                something is needed quickly).\n\n\n\nI
                                don't know much java. Usually, I'd search for what I
                                want, find something close, and fiddle with it until
                                it works/gets the desired result ish. AI is helping
                                with this a lot actually.\n\n\n\nThis
                                helped me create my own sites and my own designs to
                                life, though just at a static level. I always wanted
                                to make dynamic sites, but the idea of doing backend
                                stuff is complex to me. However...\n\n\n\n"Let
                                me look into it again" and thought if I could make a
                                simple blog. Digging a bit, and watching/skimming
                                through tutorials, I realized that I think I can.\n\n\n\nNot
                                sure when I'll start/attempt this, but will journey
                                into learning the basics of PHP and attempting to make
                                a blog. I guess I'll learn the basics of PHP, and then
                                head into Laravel. If I manage to get the hang of it,
                                I'll attempt to make a complex old project I had, and
                                if I do manage to do it, I'll be pretty confident
                                =3\n\n\n\nAside from that, would be
                                nice to make a website, a personal blog, that shows my
                                long-form articles only. Hopefully by then things
                                would be more stable nostr-wise, cleaner, and easier
                                in terms of learning, so I'd be able to do it (or
                                collab with someone to do it / to make a template for
                                all to have and deploy easily).\n\n\n\n`
  },
  {
    name: 'Freakoverse',
    link: 'https://primal.net/e/note1j7zmj4g6grc39zq30xq2de95dfszjpwlqvsktv65h7kuzjzsytjqgx73c7',
    content: `Happy to see some gamedevs port their games from Unity to Godot, after that Unity fiasco, like this one here called Road To Vostok`
  },
  {
    name: 'Freakoverse',
    link: `feed-note.html`,
    content: `This is good.`,
    imageUrl: 'assets/img/media-cache%20(1).jpg'
  }
]