"use client"

import React from 'react'
import Link from 'next/link'
import { GiRobotGrab } from "react-icons/gi";
import '@/app/components/Header.css'
import Navbar from '@/app/components/Navbar'
import Cookies from 'js-cookie';
const Header = () => {
  const [open, setOpen] = React.useState(false)
  const [loggedIn, setLoggedIn] = React.useState(false)

  React.useEffect(() => {
    Cookies.get('UserID') ? setLoggedIn(true) : setLoggedIn(false)
  }, [])
  function openNav() {
    setOpen(true)
    document.getElementById("mySidenav").style.width = "250px";
  }
  return (
    
    <div className='flex-row header' style={{ width: '100%',justifyContent: 'space-between', alignItems: 'center', padding: '10px'}}>
        <span onClick={()=>window.location.href = '/'} className='gradient-text' style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', fontSize: '20px'}}><GiRobotGrab size={25} color='#00c8ff'/>TS API</span>
        <div className="menubtn gradient-text" style={{cursor: 'pointer'}} onClick={openNav}>&#9776; Menu</div>
        <Navbar open={open} />
        <div className="links" style={{justifyContent: 'space-between', padding: '10px'}}>
        <Link href='/About'>About</Link>
        <Link href='/About'>Docs</Link>
        <Link href='/api'>API</Link>
          <Link href='/Contact'>Contact</Link>
        </div>
        <div className="links" style={{justifyContent: 'space-between', padding: '10px'}}>
          {loggedIn?<Link className='btn2' href='/api' style={{marginLeft: '10px' ,padding: '10px', borderRadius: '10px'}}><i className="animation"></i>DASHBOARD<i className="animation"></i></Link> :<Link className='btn2' href='/api' style={{marginLeft: '10px' ,padding: '10px', borderRadius: '10px'}}><i className="animation"></i>Get started<i className="animation"></i></Link>}
        </div>
    </div>
  )
}


export default Header