type PreviewStateProps = {
  title: string;
  children: React.ReactNode;
};

export default function PreviewState({ title, children }: PreviewStateProps) {
  return (
    <section className="mx-auto max-w-md px-4 py-20 text-center">
      <h1 className="font-inter text-2xl font-black text-gray-900 dark:text-white">
        {title}
      </h1>
      <div className="mt-3 text-sm text-gray-600 dark:text-neutral-300">
        {children}
      </div>
      <form action="/participant-list/preview/end" method="post">
        <button
          className="mt-6 rounded-md bg-midnightBlue px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
          type="submit"
        >
          Return to Hub
        </button>
      </form>
    </section>
  );
}