import { BasePage } from "@/gutenberg-blocks/components/layout";
import { useEffect } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { Element, scroller } from "react-scroll";

/**
 * 予約完了ページ
 * @returns {JSX.Element}
 * @constructor
 */
export const Completion = () => {
  useEffect(() => {
    scroller.scrollTo("yoyakuElement", {
      duration: 500,
      smooth: true,
      offset: -200,
    });
  }, []);

  return (
    <BasePage>
      <Element name="yoyakuElement">
        <p>
          <strong>{__("Thank you!", "yoyaku-manager")}</strong>
        </p>
        <p>
          <strong>{__("Reservation completed.", "yoyaku-manager")}</strong>
        </p>
      </Element>
    </BasePage>
  );
};