"use client";

import Link from "next/link";
import "./Switch.scss";
import { useState } from "react";

enum ESwitch {
  BUTTON,
  A,
}

interface ISwitch {
  color?: string;
  onClick?: () => void;
  defaultState?: boolean;
  type?: ESwitch;
  href?: ESwitch extends ESwitch.A ? string : string | undefined;
}

const Switch: React.FC<ISwitch> = ({
  color,
  onClick,
  defaultState,
  type,
  href,
}: ISwitch) => {
  const [toggle, setToggle] = useState(defaultState);
  return type === ESwitch.BUTTON ? (
    <button
      style={{
        backgroundColor: !toggle
          ? "#32303A"
          : color
          ? color
          : "#e64452",
      }}
      onClick={() => {
        setToggle((prev) => !prev);
        onClick && onClick();
      }}
      className={`switch ${toggle ? "switch-active" : ""}`}
    >
      <div className="switch__thumb"></div>
    </button>
  ) : (
    <Link
      scroll={false}
      href={href ? href : "?category"}
      style={{
        backgroundColor: !toggle
          ? "#32303A"
          : color
          ? color
          : "#e64452",
      }}
      onClick={() => {
        setToggle((prev) => !prev);
        onClick && onClick();
      }}
      className={`switch ${toggle ? "switch-active" : ""}`}
    >
      <div className="switch__thumb"></div>
    </Link>
  );
};

export default Switch;
