"use client";

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

interface ISwitch {
  color?: string;
  onClick?: () => void;
}

const Switch: React.FC<ISwitch> = ({ color, onClick }) => {
  const [toggle, setToggle] = useState(false);
  return (
    <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>
  );
};

export default Switch;