import cx from "../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Section = function Section(props) {
  const {
    section,
    count,
    total,
    mode
  } = props;
  if (!count) return null;
  const sectionClass = cls('section', mode, section);
  if (mode === 'grouped') {
    return <div className={sectionClass} style={{
      '--pct': `${count / total * 100}%`
    }} />;
  }
  return <>
      {[...Array(count)].map(i => <div key={i} className={sectionClass} />)}
    </>;
};
export default Section;