import { useState, useEffect } from '@wordpress/element';
import * as React from 'react';

/**
 * ProRank Toggle Track — wrapper around the canonical .prorank-toggle.
 *
 * Historically this rendered an ON/OFF text label inside a chunky pill.
 * The canonical design system relies on the toggle position alone for state,
 * with the heading/description providing context. The `showText` prop is now
 * a no-op kept for API compatibility.
 *
 * See styles/components/_toggle.css.
 */

interface ProrankToggleTrackProps {
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  // Deprecated. The canonical toggle does not render internal text.
  showText?: boolean;
  className?: string;
}

const ProrankToggleTrack: React.FC<ProrankToggleTrackProps> = ({
  checked = false,
  onChange,
  disabled = false,
  showText: _showText, // intentionally unused; kept for backwards-compat
  className = '',
}) => {
  const [isChecked, setIsChecked] = useState(checked);

  useEffect(() => {
    setIsChecked(checked);
  }, [checked]);

  const handleToggle = () => {
    if (!disabled) {
      const newValue = !isChecked;
      setIsChecked(newValue);
      onChange?.(newValue);
    }
  };

  const classes = [
    'prorank-toggle',
    'prorank-toggle--md',
    isChecked ? 'prorank-toggle--checked' : '',
    disabled ? 'prorank-toggle--disabled' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

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

export default ProrankToggleTrack;