"use client"

import type { ReactNode } from "react"
import { dashboardPageHeaderClass } from "@/components/dashboard/shared/dashboard-layout"

export interface DashboardPageHeaderProps {
  title: string
  badge: ReactNode
  description: string
  action?: ReactNode
}

export function DashboardPageHeader({
  title,
  badge,
  description,
  action,
}: DashboardPageHeaderProps) {
  return (
    <div className={dashboardPageHeaderClass}>
      <div>
        <div className="flex items-center gap-2.5 mb-1 flex-wrap">
          <h1 className="text-2xl font-bold text-foreground font-sans">{title}</h1>
          {badge}
        </div>
        <p className="text-muted-foreground text-sm font-sans">{description}</p>
      </div>
      {action}
    </div>
  )
}