import type { CSSProperties, ReactNode } from 'react'
import emptyStateSvg from '../../../assets/empty_state.svg?raw'
import noItemsSvg from '../../../assets/no_items.svg?raw'

import './EmptyState.scss'

type EmptyStateVariant = 'no-items' | 'not-found'

type EmptyStateProps = {
  title: string
  description?: string
  variant?: EmptyStateVariant
  className?: string
  style?: CSSProperties
  children?: ReactNode
}

export function EmptyState({
  title,
  description,
  variant = 'not-found',
  className = '',
  style,
  children,
}: EmptyStateProps) {
  const illustration =
    variant === 'no-items' ? noItemsSvg : emptyStateSvg

  return (
    <div
      className={`empty-state empty-state--${variant} ${className}`}
      role="status"
      style={style}
    >
      <span
        className="empty-state__illustration"
        aria-hidden="true"
        dangerouslySetInnerHTML={{ __html: illustration }}
      />

      <span className="empty-state__content">
        <strong>{title}</strong>
        {description && <small>{description}</small>}
      </span>

      {children && <span className="empty-state__actions">{children}</span>}
    </div>
  )
}
