import React from "react";
import LightIcon from "../../assets/icons/modeSwicher/light.svg";
import DarkIcon from "../../assets/icons/modeSwicher/dark.svg";

import styles from "./ModeSwicher.module.scss";

import Image from "next/image";

type SwicherT = {
  id: string;
  theme?: "light" | "dark";
  handleClick: (e: any) => void;
};

const ModeSwicher = (props: SwicherT) => {
  const { id, handleClick, theme = "light" } = props;

  const buttonTheme = theme === "dark" ? "light" : "dark";
  return (
    <div
      className={
        buttonTheme === "dark"
          ? styles.light_swicher_button
          : styles.dark_swicher_button
      }
      data-id={id}
      onClick={handleClick}
    >
      <Image
        alt="swicher_icon"
        src={buttonTheme === "dark" ? LightIcon : DarkIcon}
      />
      <p>{buttonTheme === "dark" ? "LIGHT" : "DARK"}</p>
    </div>
  );
};

export default ModeSwicher;