"use client";
import Input from "@/components/Base/Input/Input";
import themeLogo from "../../../../public/imgaes/moon-svgrepo-com.svg";
import lightTheme from "../../../../public/imgaes/sun.svg";
import styles from "./Header.module.css";
import Image from "next/image";
import { useEffect, useState } from "react";
export default function Header() {
  const [isDark, setIsDark] = useState("");
  const [searchValue, setSearchValue] = useState("");

  const handleThemeToggle = () => {
    setIsDark((prev) => {
      document.documentElement.setAttribute(
        "data-theme",
        prev === "light-theme" ? "dark-theme" : "light-theme"
      );

      return prev === "light-theme" ? "dark-theme" : "light-theme";
    });
  };

  const handleInputChange = (e: any) => {
    setSearchValue(e.target.value);
  };

  const handleSearchEnter = (e: string) => {
    console.log(e);
  };

  return (
    <header className={styles["header-wrapper"]}>
      <div className={styles.headerTitle}>NewsBlog</div>
      <div className={styles["input-container"]}>
        <Input
          placeholder={"Discover news, articles and more..."}
          value={searchValue}
          onClear={() => setSearchValue("")}
          onChange={handleInputChange}
          onEnter={handleSearchEnter}
        />
      </div>
      <div className={styles["theme-switcher"]} onClick={handleThemeToggle}>
        {isDark == "dark-theme" ? (
          <Image src={lightTheme} alt="image" width={25} />
        ) : (
          <Image src={themeLogo} alt="theme-img" width={25} />
        )}
      </div>
    </header>
  );
}
