'use client'

import { cn } from '@/lib/utils'

type CompletionStatus = 'complete' | 'warning' | 'error'

type ConfigSectionHeaderProps = {
  title: string
  description?: string
  status: CompletionStatus
  summary?: string
}

const statusDot: Record<CompletionStatus, string> = {
  complete: 'bg-emerald-500',
  warning: 'bg-amber-500',
  error: 'bg-red-500',
}

export function ConfigSectionHeader({
  title,
  description,
  status,
  summary,
}: ConfigSectionHeaderProps) {
  return (
    <div className="flex items-start gap-3">
      <div className="flex items-center gap-2 flex-1 min-w-0">
        <span
          className={cn(
            'mt-1 h-2.5 w-2.5 rounded-full shrink-0',
            statusDot[status],
          )}
        />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <h3 className="text-base font-semibold">{title}</h3>
            {summary && (
              <span className="text-xs text-muted-foreground truncate">
                — {summary}
              </span>
            )}
          </div>
          {description && (
            <p className="text-sm text-muted-foreground mt-0.5">{description}</p>
          )}
        </div>
      </div>
    </div>
  )
}