import * as React from 'react'
import { cn } from './cva'

export interface ErrorStateProps {
  code?: number | string
  title: string
  message?: string
  action?: React.ReactNode
  visual?: React.ReactNode
  variant?: 'page' | 'inline'
  className?: string
}

export function ErrorState({ code, title, message, action, visual, variant = 'page', className }: ErrorStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col gap-3',
        variant === 'page'
          ? 'items-center text-center min-h-screen justify-center p-8'
          : 'items-start text-start py-6 px-0',
        className,
      )}
    >
      {visual != null ? <div aria-hidden="true">{visual}</div> : null}
      {code != null ? <span className="text-sm font-medium text-fg-muted">{code}</span> : null}
      <h2 className="text-lg font-semibold text-fg">{title}</h2>
      {message != null ? <p className="text-sm text-fg-muted">{message}</p> : null}
      {action != null ? <div>{action}</div> : null}
    </div>
  )
}