import Link from "next/link";
import Search from "@components/base/search";
import Icons from "@components/base/icons";
import styles from "./styles.module.css";
import PropTypes from "prop-types";

function Header({ name, currentTheme, onThemeChange }) {
  const handleTheme = () => {
    onThemeChange(currentTheme);
  };
  // const handleSearch = (value) => {
  //   onSearch(value);
  // };
  // const handleClose = () => {
  //   onClose("");
  // };
  return (
    <header className={styles.header}>
      <div className={styles.container}>
        <nav className={styles.navbar}>
          <Link className={styles["navbar-brand"]} href="/">
            <Icons name="newspaper" size="medium" classes="newspaper-icon" />
            <h2>{name}</h2>
          </Link>

          <div className={styles.search}>
            <Search />
          </div>

          <div onClick={handleTheme} className={styles.themelight}>
            <Icons
              name={currentTheme === "light" ? "sun" : "moon"}
              size="medium"
            />
          </div>
        </nav>
      </div>
    </header>
  );
}
Header.propTypes = {
  name: PropTypes.string,
  currentTheme: PropTypes.string,
  onThemeChange: PropTypes.func,
};

export default Header;