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

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;
