"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("light-theme");

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

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

  useEffect(() => {
    console.log("triggered");
  }, [isDark]);

  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="" />
      </div>
      <div className={styles["theme-switcher"]} onClick={handleThemeToggle}>
        {isDark == "dark-theme" ? (
          <Image src={themeLogo} alt="image" width={25} />
        ) : (
          <Image src={lightTheme} alt="theme-img" width={25} />
        )}
      </div>
    </header>
  );
}
