import type { ReactNode } from 'react';
import { ToggleButton } from 'react-aria-components';

import styles from './Toggle.module.css';

interface Props {
  /** Name for a screen reader; it changes with the state, like the panel buttons do. */
  label: string;
  isSelected: boolean;
  onChange: (isSelected: boolean) => void;
  children: ReactNode;
}

/** A state button: pressed or not. The library keeps `aria-pressed` itself. */
export function Toggle({ label, isSelected, onChange, children }: Props) {
  return (
    <ToggleButton
      className={styles.toggle}
      aria-label={label}
      isSelected={isSelected}
      onChange={onChange}
    >
      {children}
    </ToggleButton>
  );
}