"use client";

import { Moon, Search, Sun } from "lucide-react";
import { Button } from "@/components/ui/Button";

export function Topbar({ dark, onToggleDark }: { dark: boolean; onToggleDark: () => void }) {
  return (
    <header className="flex items-center justify-between border-b border-forest/10 bg-cream/70 px-5 py-4 backdrop-blur dark:border-white/10 dark:bg-[#08130f]/80">
      <div>
        <p className="text-sm font-bold uppercase tracking-wide text-forest dark:text-mint">Aartha web app</p>
        <h1 className="font-display text-3xl text-ink dark:text-paper">Money command center</h1>
      </div>
      <div className="flex items-center gap-3">
        <div className="hidden items-center gap-2 rounded-lg bg-white/80 px-3 py-2 text-sm text-ink/50 ring-1 ring-forest/10 dark:bg-white/10 dark:text-paper/50 dark:ring-white/10 md:flex">
          <Search size={16} /> Search accounts, transactions, budgets
        </div>
        <Button variant="secondary" onClick={onToggleDark} aria-label="Toggle dark mode">{dark ? <Sun size={17} /> : <Moon size={17} />}</Button>
      </div>
    </header>
  );
}