"use client"

import { Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Sidebar } from "@/components/dashboard/sidebar"
import { UserNav } from "@/components/dashboard/user-nav"

interface DashboardHeaderProps {
    user: { email?: string | null } | null
    profile: { full_name?: string | null, role?: string | null } | null
}

export function DashboardHeader({ user, profile }: DashboardHeaderProps) {
    return (
        <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
            <Sheet>
                <SheetTrigger asChild>
                    <Button size="icon" variant="outline" className="sm:hidden">
                        <Menu className="h-5 w-5" />
                        <span className="sr-only">Menüyü Aç</span>
                    </Button>
                </SheetTrigger>
                <SheetContent side="left" className="w-[240px] sm:max-w-xs">
                    <nav className="grid gap-6 text-lg font-medium">
                        <div className="flex items-center gap-2 text-lg font-semibold md:text-base">
                            ParaKasa Panel
                        </div>
                        <Sidebar />
                    </nav>
                </SheetContent>
            </Sheet>
            <div className="w-full flex-1">
                {/* Breadcrumb or Search could go here */}
            </div>
            <UserNav user={user} profile={profile} />
        </header>
    )
}