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

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

export function TopBar({
                           refreshing,
                           onRefresh,
                           onSettings,
                           onSystemLog,
                           onPlugins,
                           onAdd,
                       }: {
    refreshing: boolean
    onRefresh: () => void
    onSettings: () => void
    onSystemLog: () => void
    onPlugins: () => 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={onPlugins}
                        title="插件管理"
                        aria-label="插件管理"
                    >
                        <Puzzle 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>
    )
}