"use client";
import React from "react";
import styles from "./BonusFeatures.module.css";
// import { useRouter } from "next/navigation";
import Image from "next/image";
interface BonusFeaturesProps {
  setShowTable: React.Dispatch<React.SetStateAction<boolean>>;
}
// const BonusFeatures = ({ShowTable,setShowTable})=> {
  const BonusFeatures: React.FC<BonusFeaturesProps> = ({ setShowTable }) => {
    console.log(setShowTable,'setShowTable');
  // const router = useRouter();

  return (
    <>
      <div className={styles.overlay}>
        <div className={styles.container}>
          <div className={styles.featureCard}>
            <div className={styles.imageWrapper}>
              <Image
                src="/image01.png"
                alt="Editable pitch deck"
                width={80}
                height={40}
              />
            </div>
            <h2 className={styles.heading}>An
              <span className={styles.highlight}> editable pitch deck. </span>Tailored to you.
            </h2>
            <p className={styles.description}>
              Based on your answers, our tool will create a <b>custom editable pitch deck outline</b> for your startup. Ready to build upon!
            </p>
          </div>

          <div className={styles.featureCard}>
            <div className={styles.imageWrapper}>
              <Image
                src="/image02.png"
                alt="Investor questions"
                width={80}
                height={40}
              />
            </div>
            <h2 className={styles.heading}>
              <span className={styles.highlight}>Bonus #1: </span>
              10 investor questions you can expect.
            </h2>
            <p className={styles.description}>
              To help you prepare, we will also send you <b>10 questions</b> that <b>you</b> can expect when pitching your startup.
            </p>
          </div>

          <div className={styles.featureCard}>
            <div className={styles.imageWrapper}>
              <Image
                src="/image03.png"
                alt="GPT-4 integration"
                width={80}
                height={40}
              />
            </div>
            <h2 className={styles.heading}>
              <span className={styles.highlight}>Bonus #2: </span>
              Deck is integrated with GPT-4.
            </h2>
            <p className={styles.description}>
              Our tool is integrated with <b>GPT-4</b> to give you the best customized deck.
            </p>
          </div>
        </div>
        <div className={styles.buttondv}>
        {/* <button onClick={() => router.push("/example")} className={styles.button}> */}
        <button
         onClick={() => {
          console.log("Clicked!");
          setShowTable(true); // ✅ Call the function
        }}
          className={styles.button}
        >
          View example 🔎
        </button>
      </div>
      </div>
  
   
     
    </>
  );
};

export default BonusFeatures;