
import React, { useEffect, useState } from 'react'
import StarDetails from './StarDetails'
import BottomPanel from './BottomPanel'
import TopPanel from './TopPanel'
import Link from 'next/link'
import Image from 'next/image'
import TutorialPopup from './TutorialPopup'
import useStore from '@/lib/store'

export default function MyContent() {

  const [searchFlag, setSearchFlag] = useState(true)
  const tabs = useStore((s)=>s.tabs)

  const changeFlag = (value:boolean) =>{
    setSearchFlag(value)
  }

  return (
    <React.Fragment>
      {/* <svg className='absolute top-0 w-full h-auto' viewBox="1 1 998 40" xmlns="http://www.w3.org/2000/svg">
        <polygon points="0,0 0,40 137,40 150,22 850,22 863,40 1000,40 1000,0"
          fill='#000000ea' stroke='#0c67a1' strokeWidth='2'
        />
      </svg> */}
      {/* <div className='absolute top-0 left-0 bg-white text-black p-4'>
        <div id='update-flag'/>
      </div> */}
      <div className='w-screen h-screen overflow-hidden'>
        <TopPanel/>
        <BottomPanel flag={searchFlag} changeFlag={changeFlag}/>
        <StarDetails/>

        <div id='social' className='fixed left-6 bottom-6 flex gap-8' 
          style={{zIndex:(tabs === 1 || tabs === 3)?'10':'4'}}
        >
          <Link href="#" target='_blank' className='cursor-pointer pointer-events-auto'>
            <svg role="img" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" className="w-8 h-8 stroke-[#bbbbbb] hover:stroke-white">
              <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path>
            </svg>
          </Link>
          <Link href="https://pump.fun/board" target='_blank' className='cursor-pointer pointer-events-auto'>
            <div className='relative w-8 h-8'>
              <Image src={"/pf.png"} layout="fill" alt="pump.fun"/>
            </div>
          </Link>
          <Link href="#" target='_blank' className='cursor-pointer pointer-events-auto'>
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-file-text w-8 h-8 stroke-[#aaaaaa] hover:stroke-white">
              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path>
              <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
              <path d="M10 9H8"></path>
              <path d="M16 13H8"></path>
              <path d="M16 17H8"></path>
            </svg>
          </Link>
        </div>

        <TutorialPopup/>
      </div>      
    </React.Fragment>
  )
}