"use client";

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

interface ISwitchProps {
  defaultState: boolean;
  color?: string;
  href: string;
}

const Switch: React.FC<ISwitchProps> = ({
  defaultState,
  color,
  href,
}: ISwitchProps) => {
  const [toggleSwitch, setToggleSwitch] = useState<boolean>(
    defaultState || false
  );
  return (
    <Link
      scroll={false}
      href={href}
      onClick={() => setToggleSwitch((prev) => !prev)}
      style={{
        backgroundColor: !toggleSwitch
          ? "rgb(71, 85, 105)"
          : color
          ? color
          : "rgb(230, 68, 82)",
      }}
      className={toggleSwitch ? "switch-active" : "switch-passive"}
    >
      <span />
    </Link>
  );
};

export default Switch;