import { ReactNode } from 'react'
import { IconAlert, IconLeaf } from './Icons'

interface Props {
  variant?: 'empty' | 'error'
  title?: string
  message: string
  children?: ReactNode
}

/**
 * Designed empty / error state: circled icon + message + optional action.
 */
export default function EmptyState({
  variant = 'empty',
  title,
  message,
  children,
}: Props) {
  return (
    <div className={`empty-state empty-state-${variant}`}>
      <span className="empty-state-icon" aria-hidden="true">
        {variant === 'error' ? <IconAlert size={28} /> : <IconLeaf size={28} />}
      </span>
      {title && <h2 className="empty-state-title">{title}</h2>}
      <p>{message}</p>
      {children && <div className="empty-state-action">{children}</div>}
    </div>
  )
}