import classNames from 'classnames';
import styles from './index.module.scss';

export interface ListItemProps {
  title: string;
  children: React.ReactNode;
  disabled?: boolean;
  overlayDescription?: string;
}
export default function ListItem({
  title,
  children,
  disabled,
  overlayDescription,
}: ListItemProps) {
  return (
    <li className={styles['setup-li']} title={overlayDescription}>
      <div
        className={disabled ? styles['setup-li-disabled'] : ''}
        title={overlayDescription}
      >
        <div className={styles['item-bar']} />
        <div className={styles['item-title']}>
          <div className={styles['item-icon']}>
            <div className={styles['item-icon-dot']} />
          </div>
          <h4>{title}</h4>
        </div>
        <div className={styles['item-content']}>{children}</div>
      </div>
    </li>
  );
}