import React, { memo, useCallback } from "react";

import classNames from "classnames";

import Switch from "../../../node_modules/@enact/sandstone/Switch/Switch";
import { countryCode } from "../../api/apiConfig";
import css from "../TSwitch/TSwitch.module.less";

export default memo(function TSwitch({
  className,
  disabled,
  onClick,
  selected,
  spotlightId,
}) {
  const _onClick = useCallback(
    (e) => {
      if (disabled) {
        e.stopPropagation();
        return;
      }

      if (onClick) {
        onClick(e);
      }
    },
    [onClick, disabled]
  );

  return (
    <Switch
      className={classNames(className, css.tSwitch, css[countryCode])}
      onClick={_onClick}
      selected={selected}
      spotlightId={spotlightId}
      aria-label={
        selected === true
          ? "Selected, On, toggle button"
          : "Selected, Off, toggle button"
      }
    />
  );
});
