import { LogOut } from "lucide-react";
import { signOutAction } from "@/app/(app)/actions";
import { Button } from "@/components/ui/button";

export function Topbar({ name }: { name?: string | null }) {
  return (
    <header className="flex items-center justify-between px-4 sm:px-8 py-4 border-b border-border/60 bg-background/40 backdrop-blur">
      <div className="text-sm text-muted-foreground">
        Hello, <span className="text-foreground font-medium">{name ?? "there"}</span>
      </div>
      <form action={signOutAction}>
        <Button type="submit" variant="ghost" size="sm">
          <LogOut className="size-4" />
          Sign out
        </Button>
      </form>
    </header>
  );
}
