import Logo from 'shared/components/logos/freesewing.js'
import Link from 'next/link'
import ThemePicker from 'shared/components/theme-picker.js'

const Right = props => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
)
const Left = props => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
)

const Header = ({ app }) => {
  return (
      <header className={`
        bg-neutral
        block
        z-30
      `}>
        <div className="max-w-6xl m-auto">
          <div className="p-2 flex flex-row gap-2 justify-between text-neutral-content">
            <button
              className={`
                btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
                hover:border hover:bg-transparent hover:border-base-100
              `}
              onClick={app.togglePrimaryMenu}>
                {app.primaryMenu
                  ? <><Left />&nbsp; Hide menu</>
                  : <>Show menu &nbsp;<Right /></>
                }
            </button>
            <Logo size={32} fill="currentColor" stroke={false} />
            <Link href="/">
              <a role="button" className="btn btn-link btn-sm text-neutral-content">
                freesewing.dev
              </a>
            </Link>
            <ThemePicker app={app} />
          </div>
        </div>
        <div className={`theme-gradient h-1 w-full z-10 relative -mb-1 ${app.loading ? 'loading' : ''}`}></div>
      </header>
  )
}

export default Header