"use client";

import { Sun, Moon, ChevronDown } from "lucide-react";
import { Icon } from "./ui";
import { user } from "./account-data";

export function Topbar({ theme, onToggle, title, subtitle }: { theme: "dark" | "light"; onToggle: () => void; title: string; subtitle: string }) {
  return (
    <header className="dash-topbar">
      <div className="dash-title">
        <h1>{title}</h1>
        <p>{subtitle}</p>
      </div>
      <div className="top-actions">
        <button className="ic-btn" aria-label="Search"><Icon name="search" size={18} /></button>
        <button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
          {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
        </button>
        <button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
          <Icon name="bell" size={18} />
          <span style={{ position: "absolute", top: 9, right: 10, width: 7, height: 7, borderRadius: 99, background: "var(--orange)", border: "2px solid var(--panel)" }} />
        </button>
        <button className="top-user">
          <span className="av" style={{ background: user.avatarGradient, display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>{user.initials}</span>
          <div style={{ textAlign: "left" }}>
            <div className="nm">{user.name}</div>
            <div className="rl">{user.role}</div>
          </div>
          <ChevronDown size={16} />
        </button>
      </div>
    </header>
  );
}