"use client";

import { Sun, ChevronDown } from "lucide-react";
import { FigIcon } from "./figicon";

export function Topbar({ theme, onToggle }: { theme: "dark" | "light"; onToggle: () => void }) {
  return (
    <header className="dash-topbar">
      <div className="dash-title">
        <h1>Dashboard Overview</h1>
        <p>Welcome back, here&apos;s what&apos;s happening with your territory</p>
      </div>
      <div className="top-actions">
        <button className="ic-btn" aria-label="Search"><FigIcon name="i_search" size={18} /></button>
        <button className="ic-btn" aria-label="Toggle theme" onClick={onToggle}>
          {theme === "dark" ? <FigIcon name="i_theme" size={18} /> : <Sun size={18} />}
        </button>
        <button className="ic-btn" aria-label="Notifications" style={{ position: "relative" }}>
          <FigIcon name="i_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: "linear-gradient(135deg,#fda913,#fd6d13)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 700, fontSize: 12 }}>JJ</span>
          <div style={{ textAlign: "left" }}>
            <div className="nm">Justin Johnson</div>
            <div className="rl">Owner</div>
          </div>
          <ChevronDown size={16} />
        </button>
      </div>
    </header>
  );
}
