"use client"

import type React from "react"
import { Button } from "@/components/ui/button"
import { Menu } from "lucide-react"
import { LogoutButton } from "@/components/logout-button"
import { getUser } from "@/lib/auth"

interface HeaderProps {
  onMenuClick: () => void
}

export function Header({ onMenuClick }: HeaderProps) {
  const user = getUser()

  return (
    <header className="sticky top-0 w-screen lg:w-auto z-30 flex h-16 items-center gap-4 border-b border-border bg-card px-6">
      <Button
        variant="ghost"
        size="icon"
        className="lg:hidden"
        onClick={onMenuClick}
      >
        <Menu className="h-6 w-6" />
      </Button>
      <div className="flex-1" />
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm">
            {user?.name.charAt(0).toUpperCase()}
          </div>
          <div className="hidden md:block overflow-hidden">
            <p className="truncate text-sm font-medium">{user?.name}</p>
            <p className="truncate text-xs text-muted-foreground">{user?.email}</p>
          </div>
        </div>
        <LogoutButton />
      </div>
    </header>
  )
}