/**
 * Custom Toggle — emits canonical .prorank-toggle markup.
 * See styles/components/_toggle.css for the design system.
 */

const CustomToggle = ({ checked, onChange, disabled = false, size = 'md', className = '' }) => {
  const handleClick = () => {
    if (!disabled) {
      onChange(!checked);
    }
  };

  const handleKeyDown = (e) => {
    if (!disabled && (e.key === ' ' || e.key === 'Enter')) {
      e.preventDefault();
      onChange(!checked);
    }
  };

  const classes = [
    'prorank-toggle',
    `prorank-toggle--${size}`,
    checked ? 'prorank-toggle--checked' : '',
    disabled ? 'prorank-toggle--disabled' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      className={classes}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      disabled={disabled}
    >
      <span className="prorank-toggle__track" />
      <span className="prorank-toggle__thumb" />
    </button>
  );
};

export default CustomToggle;