import { DashboardBreadcrumb } from "./dashboard-breadcrumb";
import { DashboardUserMenu } from "./dashboard-user-menu";

export function DashboardHeader() {
  return (
    <header className="flex h-16 items-center justify-between rounded-xl border border-slate-200 bg-white px-4 shadow-sm sm:px-6">
      <DashboardBreadcrumb />
      <div className="flex items-center gap-3">
        <button
          type="button"
          aria-label="Notifications"
          className="relative flex size-10 items-center justify-center rounded-full bg-slate-50 text-slate-600 transition hover:bg-violet-50 hover:text-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-400"
        >
          <svg
            viewBox="0 0 24 24"
            className="size-5"
            fill="none"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="1.7"
            aria-hidden="true"
          >
            <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" />
          </svg>
          <span className="absolute right-2 top-2 size-2 rounded-full bg-violet-600 ring-2 ring-white" />
        </button>
        <div className="hidden h-8 w-px bg-slate-200 sm:block" />
        <DashboardUserMenu />
      </div>
    </header>
  );
}