import React from "react";
import styles from "./Header.module.css";
import { useRouter } from "next/navigation";

interface HeaderProps {
  title?: string;
  onTwitterClick?: () => void;
   setShowTable: React.Dispatch<React.SetStateAction<boolean>>;
}

const Header: React.FC<HeaderProps> = ({
  title = "MY PITCH DECK💡",
  onTwitterClick = () => {
    window.open("https://twitter.com/intent/tweet?text=Kickstart%20your%20funding%20with%20a%20custom%20pitch%20deck%20template%20for%20your%20startup.%20Get%20inspired%20and%20save%20time%20by%20answering%20just%205%20questions%20at%20https%3A//mypitchdeck.com", "_blank");
  },
  setShowTable,
}) => {
  const router = useRouter();

  const handleClick = () => {
    if (setShowTable) {
      setShowTable(false); // toggle table
    } else {
      // console.warn("setShowTable not provided");
    }
  };
  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <span className={styles.titleLink} onClick={() =>{handleClick(); router.push("/");}}>
          <h1 className={styles.title}>{title}</h1>
        </span>

        <button
          className={styles.twitterButton}
          onClick={onTwitterClick}
          aria-label="Twitter"
        >
          <div className={styles.iconWrapper}>
            
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28 9.09 5.11 7.38 3 4.79C2.63 5.42 2.42 6.16 2.42 6.94C2.42 8.43 3.17 9.75 4.33 10.5C3.62 10.5 2.96 10.3 2.38 10V10.03C2.38 12.11 3.86 13.85 5.82 14.24C5.19084 14.4129 4.53004 14.4369 3.89 14.31C4.16161 15.1625 4.69354 15.9084 5.41102 16.4429C6.1285 16.9775 6.99545 17.2737 7.89 17.29C6.37367 18.4905 4.49401 19.1394 2.56 19.13C2.22 19.13 1.88 19.11 1.54 19.07C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="black"/>
</svg>

          </div>
        </button>
      </div>
    </header>
  );
};

export default Header;