'use client'

import { TriangleAlert, X } from 'lucide-react'

interface ValidationSummaryProps {
  errors: string[]
  warnings: string[]
  onDismiss: () => void
}

/** Inline banner listing blocking errors (and non-blocking warnings). */
export function ValidationSummary({ errors, warnings, onDismiss }: ValidationSummaryProps) {
  if (errors.length === 0 && warnings.length === 0) return null
  return (
    <div
      role="alert"
      className="border-destructive/30 bg-destructive/5 mx-4 mt-3 rounded-lg border p-3"
    >
      <div className="flex items-start gap-2">
        <TriangleAlert className="text-destructive mt-0.5 h-4 w-4 shrink-0" aria-hidden />
        <div className="min-w-0 flex-1">
          {errors.length > 0 && (
            <>
              <p className="text-foreground text-sm font-medium">
                Resolve {errors.length} issue{errors.length === 1 ? '' : 's'} before publishing
              </p>
              <ul className="text-muted-foreground mt-1 list-disc space-y-0.5 pl-4 text-xs">
                {errors.map((e, i) => (
                  <li key={`e-${i}`}>{e}</li>
                ))}
              </ul>
            </>
          )}
          {warnings.length > 0 && (
            <ul className="text-muted-foreground mt-2 list-disc space-y-0.5 pl-4 text-xs">
              {warnings.map((w, i) => (
                <li key={`w-${i}`}>{w}</li>
              ))}
            </ul>
          )}
        </div>
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Dismiss"
          className="text-muted-foreground hover:text-foreground rounded p-0.5"
        >
          <X className="h-4 w-4" aria-hidden />
        </button>
      </div>
    </div>
  )
}
