'use client'
import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
import {Button} from '@/components/ui/button'
import {useLayoutStore} from '@/app/stores'
import {merge} from '@/lib/utils'
import UserCenter from '@/components/composites/user-center'
import {User} from '@/lib/models'

export type HeaderProps = {
  profile: User
}

export default function Header(props: HeaderProps) {
  const navbar = useLayoutStore(store => store.navbar)
  const toggleNavbar = useLayoutStore(store => store.toggleNavbar)

  return (
    <header className={merge(
      `flex-none h-16 overflow-hidden`,
      `flex items-stretch`,
    )}>
      {/* left */}
      <div className="flex-auto flex items-center gap-2">
        <Button
          theme="ghost"
          className="w-9 h-9 ml-4 md:ml-0"
          onClick={toggleNavbar}>
          {navbar
            ? <PanelLeftCloseIcon/>
            : <PanelLeftOpenIcon/>
          }
        </Button>
        <span className="max-md:hidden">
          欢迎来到，蓝狐代理
        </span>
      </div>

      {/* right */}
      <div className="flex-none flex items-center justify-end pr-4">
        <UserCenter profile={props.profile}/>
      </div>
    </header>
  )
}