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, onSearch, onClose, 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" />
            <h3>{name}</h3>
          </Link>

          <div className={styles.search}>
            <Search onSearch={handleSearch} onClose={handleClose} />
          </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;