import * as React from 'react';
import classNames from 'classnames/bind';

import s from './HeroDock.module.scss';

const cn = classNames.bind(s);

interface IHeroDockProps {
  children?: React.ReactNode;
  inverted?: boolean;
  subDock?: boolean;
  color?: string;
}

export const HeroDock = ({ children, inverted, subDock, color }: IHeroDockProps) => {
  return (
    <div className={cn(s.heroDock, { subDock })}>
      <div className={s.heroDock__wrapper}>
        <ul className={s.heroDock__items}>
          {React.Children.toArray(children).map((child, i) =>
            React.isValidElement(child)
              ? React.cloneElement(child, { inverted, color, key: i })
              : child,
          )}
        </ul>
      </div>
    </div>
  );
};