import type { LucideIcon } from 'lucide-react'
import type { ReactNode } from 'react'

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@/components/ui/empty'
import { cn } from '@/lib/utils'

interface Props {
  icon?: LucideIcon
  title: string
  description: string
  action?: ReactNode
  /**
   * Para la única variante que existe: **adentro de una tabla**.
   *
   * El borde propio es correcto cuando la pieza está suelta en la página y es
   * exactamente incorrecto dentro de un marco que ya lo dibujó: quedan dos
   * bordes, uno pegado al otro. `cn` deja que `border-0` gane.
   */
  className?: string
}

/**
 * Lista vacía.
 *
 * Dice qué falta y ofrece el paso siguiente, en vez de dejar un espacio en
 * blanco: para alguien que recién llega, una tabla vacía y una tabla rota se ven
 * igual. Nunca «no hay datos» a secas.
 *
 * La firma no cambió al pasar a la primitiva, y eso es a propósito: `DataTable`
 * lo recibe por su prop `empty` y hay una docena de llamadores. Lo que cambió es
 * el adentro —el borde punteado dibujado a mano se fue— y que el título ahora es
 * un **encabezado de verdad** (T4). Antes era un `<p>` en negrita: se veía como
 * un título y no existía como tal, así que la vista quedaba sin encabezados y no
 * había forma de saltar hasta él.
 */
export function EmptyState({ icon: Icon, title, description, action, className }: Props) {
  return (
    <Empty className={cn('border', className)}>
      <EmptyHeader>
        {Icon ? (
          <EmptyMedia variant="icon">
            <Icon aria-hidden />
          </EmptyMedia>
        ) : null}
        <EmptyTitle asChild>
          <h3>{title}</h3>
        </EmptyTitle>
        <EmptyDescription className="text-pretty">{description}</EmptyDescription>
      </EmptyHeader>
      {action ? <EmptyContent>{action}</EmptyContent> : null}
    </Empty>
  )
}