import { Dictionary } from "@allai/i18n/server";
import { Locale } from "@allai/i18n/config";
import Image from "next/image";
import { Button } from "@allai/ui";
import { Bell, Search } from "lucide-react";

export function MainHeader({ dictionary, locale }: { dictionary: Dictionary; locale: Locale }) {
  return (
    <header className="flex items-center justify-between">
      <div>
        <p className="text-sm uppercase tracking-[0.18em] text-[color:var(--color-muted)]">{dictionary.navigation.suite}</p>
        <h1 className="mt-2 text-2xl font-semibold text-[var(--color-foreground)]">{dictionary.dashboard.welcome}</h1>
      </div>
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="sm" aria-label="Search">
          <Search className="h-4 w-4" />
        </Button>
        <Button variant="ghost" size="sm" aria-label="Notifications" className="relative">
          <Bell className="h-4 w-4" />
          <span className="absolute right-2 top-2 inline-flex h-2 w-2 rounded-full bg-[var(--color-accent)]" />
        </Button>
        <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-[color:var(--color-border)/0.4]">
          <Image src={`https://api.dicebear.com/7.x/initials/svg?seed=${locale}`} alt="Profile" width={40} height={40} />
        </div>
      </div>
    </header>
  );
}
