import type { ReactNode } from 'react'
import type { CombatLogEntry } from '../game'
import { RematchControls, ResultLogToggle } from './RewardPanels'

type ResultAction = {
  label: string
  onClick: () => void
  className?: string
  disabled?: boolean
}

type ResultRematch = {
  visible: boolean
  requested: boolean
  message: string
  onRematch: () => void
}

export function ResultScreen({
  eyebrow,
  title,
  children,
  log,
  showLog,
  onToggleLog,
  rematch,
  actions,
}: {
  eyebrow: string
  title: string
  children?: ReactNode
  log?: CombatLogEntry[]
  showLog?: boolean
  onToggleLog?: () => void
  rematch?: ResultRematch
  actions?: ResultAction[]
}) {
  return (
    <div className="result-screen">
      <div>
        <p className="eyebrow">{eyebrow}</p>
        <h2>{title}</h2>
        {children}
        {log && onToggleLog && (
          <ResultLogToggle log={log} showEndLog={Boolean(showLog)} onToggle={onToggleLog} />
        )}
        {rematch?.visible && (
          <RematchControls
            requested={rematch.requested}
            message={rematch.message}
            onRematch={rematch.onRematch}
          />
        )}
        {actions?.map((action) => (
          <button
            className={action.className}
            disabled={action.disabled}
            key={action.label}
            onClick={action.onClick}
            type="button"
          >
            {action.label}
          </button>
        ))}
      </div>
    </div>
  )
}