'use client'

import type { ReactNode } from 'react'
import { DashboardWidgetHelp } from '@/components/dashboard-widget-help'
import type { DashboardWidgetId } from '@/lib/dashboard/layout'

interface DashboardWidgetTitleRowProps {
  widgetId: DashboardWidgetId
  icon?: ReactNode
  title: string
  actions?: ReactNode
  className?: string
}

/** Titre widget : actions d’abord, aide « ? » en dernier — ne masque jamais la navigation. */
export function DashboardWidgetTitleRow({
  widgetId,
  icon,
  title,
  actions,
  className = 'mb-3',
}: DashboardWidgetTitleRowProps) {
  return (
    <div className={`flex items-center justify-between gap-2 ${className}`}>
      <div className="flex items-center gap-2 min-w-0 flex-1">
        {icon}
        <h2 className="text-[10px] font-mono font-bold uppercase tracking-widest text-ink dark:text-dark-ink truncate">
          {title}
        </h2>
      </div>
      <div className="flex items-center gap-1.5 shrink-0">
        {actions}
        <DashboardWidgetHelp widgetId={widgetId} />
      </div>
    </div>
  )
}