"use client";

import Button from "../ui/Button";
import { useModal } from "../../lib/modal-system/ModalContext";
import Image from "next/image";

export default function ComingSoonModal() {
  const { closeModal } = useModal();

  return (
    <div className="text-center">
      <div className="mx-auto flex items-center justify-center">
        <Image
          src="/images/coming-soon.svg"
          alt="error"
          width={280}
          height={280}
        />
      </div>

      <h2 className="mx-auto mt-8 font-heading text-heading text-center text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-4xl 2xl:leading-11">
        Coming <span className="text-gradient">Soon!</span>
      </h2>

      <p className="mx-auto mt-5 font-body text-base leading-6 text-[#54545F]">
        We're working hard to bring this feature to you. It isn't available just
        yet, but it'll be here soon. Stay tuned!
      </p>

      <div className="mt-8 flex items-center justify-center gap-4 flex-wrap">
        <Button
          type="button"
          variant="white"
          onClick={closeModal}
          buttonClassName="shadow-none!"
          BtnInnerclassName="text-link!"
        >
          Got it
        </Button>
      </div>
    </div>
  );
}