import type { ReactNode } from 'react'

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'

interface Props {
  /** El estado, como `StatusBadge`. Va primero, igual que en la tabla. */
  badge?: ReactNode
  /** Qué pasó. Normalmente un `<Link>` al objeto del que se está hablando. */
  title: ReactNode
  /** Por qué pasó, en una o dos líneas. */
  description?: ReactNode
  /** Cuándo pasó, con `DataTimestamp`. Nunca dentro de un `title=` (RT-02). */
  meta?: ReactNode
  /** Como mucho un control. */
  action?: ReactNode
  /** El `RowActions` de la fila, cuando hay dos o más acciones. */
  menu?: ReactNode
  /** `muted` para lo ya leído o ya resuelto: sigue estando, pesa menos. */
  tone?: 'default' | 'muted'
}

/**
 * `C-1B-5` · La fila de aviso: estado, qué pasó, por qué, cuándo y qué hacer.
 *
 * El tablero y la pantalla de notificaciones muestran **el mismo objeto** y hoy
 * lo dibujan distinto —una lista con puntos de un lado, una tabla del otro—,
 * así que el mismo aviso parece dos cosas según desde dónde se llegue. Ésta es
 * la única forma que tiene.
 *
 * No lleva borde propio: la caja es de la `Card` o de la `Section` que contiene
 * a la lista. Un aviso con marco al lado de otro con marco convierte una lista
 * de cinco en cinco cajas.
 *
 * El título y la bajada no se recortan. La primitiva viene con `line-clamp`, y
 * un aviso cuya única línea es «No pudimos consultar el dominio porque…»
 * cortado en seco es un aviso que hay que abrir para entender.
 */
export function NoticeItem({
  badge,
  title,
  description,
  meta,
  action,
  menu,
  tone = 'default',
}: Props) {
  return (
    <Item variant={tone === 'muted' ? 'muted' : 'default'} className="items-start">
      {badge ? <ItemMedia className="pt-0.5">{badge}</ItemMedia> : null}

      <ItemContent className="min-w-0">
        <ItemTitle className="line-clamp-none w-full text-pretty">{title}</ItemTitle>
        {description ? (
          <ItemDescription className="line-clamp-none text-pretty">
            {description}
          </ItemDescription>
        ) : null}
        {meta ? <div className="text-muted-foreground text-xs">{meta}</div> : null}
      </ItemContent>

      {action || menu ? (
        <ItemActions>
          {action}
          {menu}
        </ItemActions>
      ) : null}
    </Item>
  )
}