'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
  wrapTitle?: boolean
}

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