import * as React from "react";

export interface SwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  id?: string;
  "aria-label"?: string;
  className?: string;
}

export function Switch({
  checked,
  onChange,
  disabled,
  id,
  className,
  ...rest
}: SwitchProps) {
  const classes = ["ads-switch"];
  if (className) classes.push(className);
  return (
    <span className={classes.join(" ")}>
      <input
        type="checkbox"
        role="switch"
        id={id}
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
        {...rest}
      />
      <span className="ads-switch__track" aria-hidden />
    </span>
  );
}
