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

export type HeaderProps = {}

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`,
      `flex items-stretch`,
    )}>
      {/* left */}
      <div className="flex-auto flex items-center gap-2">
        <Button
          theme="ghost"
          className="w-9 h-9"
          onClick={toggleNavbar}>
          {navbar
            ? <PanelLeftCloseIcon/>
            : <PanelLeftOpenIcon/>
          }
        </Button>
        <span>
          欢迎来到，蓝狐代理
        </span>
      </div>

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