import { Fragment, ReactNode } from 'react'
import Link from 'next/link'

import './globals.css'

export default async function RootLayout({
  children,
}: {
  children: ReactNode
}) {
  return (
    <html lang='en' data-theme='dark'>
      <head>
        <title>Next.js</title>
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      </head>
      <body>
        <Fragment>
          <div className='navbar bg-slate-200 text-black'>
            <div className='navbar-start'>
              <div className='dropdown'>
                <label tabIndex={0} className='btn btn-ghost btn-circle'>
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    className='h-5 w-5'
                    fill='none'
                    viewBox='0 0 24 24'
                    stroke='currentColor'
                  >
                    <path
                      strokeLinecap='round'
                      strokeLinejoin='round'
                      strokeWidth='2'
                      d='M4 6h16M4 12h16M4 18h7'
                    />
                  </svg>
                </label>
                <ul
                  tabIndex={0}
                  className='menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52'
                >
                  <li>
                    <Link href='/'>Home</Link>
                  </li>
                  <li>
                    <Link href='/editor'>Editor</Link>
                  </li>
                  <li>
                    <Link href='/view'>View</Link>
                  </li>
                </ul>
              </div>
            </div>
            <div className='navbar-center'>
              <a className='btn btn-ghost normal-case text-xl'>daisyUI</a>
            </div>
            <div className='navbar-end'>
              <button className='btn btn-ghost btn-circle'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  className='h-5 w-5'
                  fill='none'
                  viewBox='0 0 24 24'
                  stroke='currentColor'
                >
                  <path
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
                  />
                </svg>
              </button>
              <button className='btn btn-ghost btn-circle'>
                <div className='indicator'>
                  <svg
                    xmlns='http://www.w3.org/2000/svg'
                    className='h-5 w-5'
                    fill='none'
                    viewBox='0 0 24 24'
                    stroke='currentColor'
                  >
                    <path
                      strokeLinecap='round'
                      strokeLinejoin='round'
                      strokeWidth='2'
                      d='M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9'
                    />
                  </svg>
                  <span className='badge badge-xs badge-primary indicator-item'></span>
                </div>
              </button>
            </div>
          </div>
          {children}
          <footer className='footer p-10 bg-neutral text-neutral-content'>
            <div>
              <span className='footer-title'>Services</span>
              <a className='link link-hover'>Branding</a>
              <a className='link link-hover'>Design</a>
              <a className='link link-hover'>Marketing</a>
              <a className='link link-hover'>Advertisement</a>
            </div>
            <div>
              <span className='footer-title'>Company</span>
              <a className='link link-hover'>About us</a>
              <a className='link link-hover'>Contact</a>
              <a className='link link-hover'>Jobs</a>
              <a className='link link-hover'>Press kit</a>
            </div>
            <div>
              <span className='footer-title'>Legal</span>
              <a className='link link-hover'>Terms of use</a>
              <a className='link link-hover'>Privacy policy</a>
              <a className='link link-hover'>Cookie policy</a>
            </div>
          </footer>
        </Fragment>
      </body>
    </html>
  )
}