import { Plus, RefreshCw, ScrollText, Settings2 } from 'lucide-react'

import { Button } from './ui/Button'

export function TopBar({
  refreshing,
  onRefresh,
  onSettings,
  onSystemLog,
  onAdd,
}: {
  refreshing: boolean
  onRefresh: () => void
  onSettings: () => void
  onSystemLog: () => void
  onAdd: () => void
}) {
  return (
    <header className="sticky top-0 z-30 border-b border-line/80 bg-white/85 backdrop-blur-xl">
      <div className="mx-auto flex h-16 max-w-[1320px] items-center gap-3 px-4 sm:px-6">
        <div className="flex min-w-0 items-center gap-3">
          <div className="grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-brand-500 to-sky-400 text-[15px] font-bold text-white shadow-md shadow-brand-500/30">
            学
          </div>
          <div className="min-w-0">
            <div className="flex items-center gap-2">
              <h1 className="truncate text-[15px] font-semibold tracking-tight text-slate-900">
                莞易学
              </h1>
              <span className="hidden rounded-md bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-500 sm:inline">
                多账号学习控制台
              </span>
            </div>
            <p className="truncate text-[11.5px] text-slate-500">
              东莞市教师培训平台 · 新旧版课程自动识别
            </p>
          </div>
        </div>

        <div className="flex-1" />

        <div className="flex items-center gap-1.5">
          <Button
            variant="ghost"
            size="icon"
            onClick={onRefresh}
            loading={refreshing}
            title="刷新列表"
            aria-label="刷新列表"
          >
            <RefreshCw className="size-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onSystemLog}
            title="系统日志"
            aria-label="系统日志"
          >
            <ScrollText className="size-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onSettings}
            title="系统设置"
            aria-label="系统设置"
          >
            <Settings2 className="size-4" />
          </Button>
          <Button variant="primary" className="ml-1" icon={<Plus className="size-4" />} onClick={onAdd}>
            <span className="hidden sm:inline">添加账号</span>
          </Button>
        </div>
      </div>
    </header>
  )
}