import React from 'react';
import styles from './index.less';
import classNames from 'classnames';
import { useLocation } from '@umijs/max';

interface ModeSwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
}

const ModeSwitch: React.FC<ModeSwitchProps> = ({ checked, onChange }) => {
  const location = useLocation();
  const isOverviewMode = location.pathname === '/overview';

  return (
    <div 
      className={classNames(styles.container, {
        [styles.overviewMode]: isOverviewMode
      })} 
      onClick={() => onChange(!checked)}
    >
      <div className={classNames(styles.slider, {[styles.checked]: !checked})} />
      <div className={styles.textWrapper}>
        <span className={classNames({[styles.active]: checked})}>统览模式</span>
        <span className={classNames({[styles.active]: !checked})}>专题模式</span>
      </div>
    </div>
  );
};

export default ModeSwitch; 