import { Link } from 'react-router'

type Action =
  | { label: string; to: string }
  | { label: string; onClick: () => void }

type Props = {
  message: string
  error?: boolean
  action?: Action
}

const actionClass = 'text-sm text-stone-500 dark:text-stone-400 underline hover:text-stone-700 dark:hover:text-stone-300'

export default function CenteredMessage({ message, error = false, action }: Props) {
  return (
    <div className="flex-1 flex items-center justify-center p-4">
      <div className="text-center space-y-3">
        <p className={`text-sm ${error ? 'text-red-500' : 'text-stone-500 dark:text-stone-400'}`}>{message}</p>
        {action && (
          'to' in action
            ? <Link to={action.to} className={actionClass}>{action.label}</Link>
            : <button onClick={action.onClick} className={actionClass}>{action.label}</button>
        )}
      </div>
    </div>
  )
}
