App Header

import { Bell, Plus, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppHeaderProps {
  name?: string;
  summary?: string;
  emoji?: string;
  notifications?: number;
  className?: string;
}

/** Friendly top app header: greeting with emoji and day summary on the left; search pill, bell with badge, periwinkle “New” and an emoji avatar on the right. */
export function AppHeader({
  name = "Ana",
  summary = "You have 5 tasks today — 2 are almost done.",
  emoji = "🦊",
  notifications = 3,
  className,
}: AppHeaderProps) {
  return (
    <header className={cn("flex flex-wrap items-center gap-4 bg-da-bg px-4 py-5 text-da-fg sm:px-8", className)}>
      <div className="min-w-0 flex-1">
        <h1 className="font-da-display text-2xl font-extrabold tracking-da-display sm:text-3xl">Good morning, {name} 👋</h1>
        <p className="mt-0.5 text-da-muted-fg">{summary}</p>
      </div>
      <div className="flex items-center gap-2">
        <label className="hidden h-11 items-center gap-2 rounded-da-pill bg-da-surface px-4 shadow-da-sm focus-within:ring-(length:--da-ring-width) focus-within:ring-da-ring md:flex">
          <Search aria-hidden className="size-4 text-da-muted-fg" />
          <span className="sr-only">Search tasks</span>
          <input type="search" placeholder="Search tasks…" className="w-44 bg-transparent text-[15px] outline-none placeholder:text-da-muted-fg" />
        </label>
        <a href="#notifications" className="da-focus relative grid size-11 place-items-center rounded-full bg-da-surface shadow-da-sm">
          <Bell aria-hidden className="size-5" />
          <span className="sr-only">Notifications ({notifications})</span>
          {notifications > 0 && (
            <span
              aria-hidden
              className="absolute -top-0.5 -right-0.5 grid size-5 place-items-center rounded-full bg-da-danger text-[10px] font-bold text-da-danger-fg ring-2 ring-da-bg"
            >
              {notifications}
            </span>
          )}
        </a>
        <a
          href="#new"
          className="da-focus da-transition inline-flex h-11 items-center gap-1.5 rounded-da-pill bg-da-primary px-4 font-semibold text-da-primary-fg hover:-translate-y-0.5"
        >
          <Plus aria-hidden className="size-5" />
          <span className="max-sm:sr-only">New</span>
        </a>
        <span role="img" aria-label="Your profile" className="grid size-11 place-items-center rounded-full bg-da-accent text-xl">
          {emoji}
        </span>
      </div>
    </header>
  );
}

export default AppHeader;