import { FileArchive, Search, Sparkles } from 'lucide-react'
import { useLocation } from 'react-router-dom'

import { Button } from '@renderer/components/ui/button'
import { Input } from '@renderer/components/ui/input'
import { findMenuItemByPath } from '@renderer/student/menu'

export function AppHeader(): React.JSX.Element {
  const { pathname } = useLocation()
  const activeMenuItem = findMenuItemByPath(pathname)

  return (
    <header className="flex items-center justify-between gap-4 border-b bg-card px-6 py-4 max-[900px]:flex-wrap max-[760px]:px-4">
      <div className="min-w-0">
        <h2 className="text-2xl font-semibold tracking-normal">
          {activeMenuItem?.title ?? '成长报告助手'}
        </h2>
      </div>

      <div className="flex min-w-0 flex-wrap items-center justify-end gap-2 max-[900px]:w-full max-[900px]:justify-start">
        <div className="relative w-[min(22rem,34vw)] min-w-56 max-[900px]:min-w-0 max-[900px]:flex-1">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input className="pl-9" placeholder="搜索工具、幼儿、模板" />
        </div>
        <Button variant="outline">
          <FileArchive className="size-4" />
          导出备份
        </Button>
        <Button>
          <Sparkles className="size-4" />
          新建任务
        </Button>
      </div>
    </header>
  )
}
