"use client";

import { type ReactNode, useState } from "react";

/** Keeps the extra posts in the DOM and reveals them on click, like the design. */
export function BlogLoadMore({ children }: { children: ReactNode }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div
        id="morePosts"
        className="mt-4"
        style={{ display: open ? "block" : "none" }}
      >
        <div className="row g-4 g-lg-3 g-xl-4">{children}</div>
      </div>
      {open ? null : (
        <div className="text-center mt-4 mt-md-5">
          <button
            id="loadMoreBtn"
            type="button"
            className="no-bg-btn text-md text-decoration-underline mx-auto"
            onClick={() => setOpen(true)}
          >
            Load More
          </button>
        </div>
      )}
    </>
  );
}