import type { ReactNode } from 'react'
import type { LucideIcon } from 'lucide-react'
import { Button } from './Button'

/**
 * Centered empty-state block для list-страниц, когда данных пока нет.
 * Заменяет «Нет данных» в DataTable на дружественный CTA: иконка +
 * заголовок + пояснение + кнопка «Создать первый …».
 *
 * Использование на list-pages: проверить (items.length===0 && !isLoading)
 * и подменить таблицу на <EmptyState>. Можно использовать как `empty`
 * prop у DataTable — он отрендерит внутри пустой строки.
 */
interface EmptyStateProps {
  icon: LucideIcon
  title: string
  description?: ReactNode
  /** CTA-кнопка справа от описания: для создания первой записи. */
  actionLabel?: string
  onAction?: () => void
  /** Если задано, рисуется secondary-link под основной кнопкой. */
  secondaryLabel?: string
  onSecondary?: () => void
}

export function EmptyState({
  icon: Icon, title, description, actionLabel, onAction, secondaryLabel, onSecondary,
}: EmptyStateProps) {
  return (
    <div className="h-full min-h-[400px] flex flex-col items-center justify-center text-center px-6 py-12">
      <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-4">
        <Icon className="w-7 h-7 text-slate-400 dark:text-slate-500" />
      </div>
      <h3 className="text-base font-semibold text-slate-900 dark:text-slate-100">{title}</h3>
      {description && (
        <p className="mt-1.5 text-sm text-slate-500 dark:text-slate-400 max-w-md">{description}</p>
      )}
      {(actionLabel || secondaryLabel) && (
        <div className="mt-5 flex flex-col items-center gap-2">
          {actionLabel && onAction && (
            <Button onClick={onAction}>{actionLabel}</Button>
          )}
          {secondaryLabel && onSecondary && (
            <button
              type="button"
              onClick={onSecondary}
              className="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 underline-offset-4 hover:underline"
            >
              {secondaryLabel}
            </button>
          )}
        </div>
      )}
    </div>
  )
}
