import { Fragment } from 'react'
import type { ReactNode } from 'react'

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

interface Props {
  /** El `StatusBadge` de la página. Siempre primero. */
  badge?: ReactNode
  /** Hasta tres metadatos —una fecha, un identificador, una forma de propiedad—. */
  items?: ReactNode[]
  className?: string
}

/**
 * La línea de estado de la página, inmediatamente debajo de la bajada.
 *
 * Existe porque el encabezado del producto es una franja de alto fijo de una
 * línea y no tiene lugar para nada más. Sin este bloque, el badge de estado y la
 * fecha de última comprobación terminan colgados del slot `actions` —donde el
 * contrato sólo admite controles— o flotando sueltos arriba del contenido, que
 * es como cada vista los venía resolviendo por su cuenta.
 *
 * Una sola línea a 1280 px, nunca tres. Si hay que decir más, no es estado de la
 * página: es contenido y va en una `Section`.
 */
export function PageIntro({ badge, items = [], className }: Props) {
  const visible = items.filter((item) => item !== null && item !== undefined && item !== false)

  if (!badge && visible.length === 0) return null

  return (
    <div className={cn('flex flex-wrap items-center gap-x-3 gap-y-1 text-sm', className)}>
      {badge}
      {visible.map((item, index) => (
        // El índice alcanza como clave: la lista es de metadatos fijos de la
        // página, no se reordena ni se filtra en vivo.
        <Fragment key={index}>
          {/* El punto separa a la vista y no al lector de pantalla, que ya
              recibe cada metadato como un elemento aparte. El badge no lo
              necesita: ya es un objeto visual con su propio contorno. */}
          {index > 0 ? (
            <span aria-hidden className="text-muted-foreground">
              ·
            </span>
          ) : null}
          <span className="min-w-0">{item}</span>
        </Fragment>
      ))}
    </div>
  )
}