import * as React from 'react';

import s from './StickyItem.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface IStickyItemProps {
  children?: React.ReactNode;
  color: string;
  title?: string;
  subTitle?: string;
  text?: string;
  subText?: string;
  textAlignRight?: boolean;
  alignRightItemWithButton?: boolean;
  alignRight?: boolean;
}

export const StickyItem = ({
  children,
  color,
  title,
  subTitle,
  text,
  subText,
  textAlignRight,
  alignRightItemWithButton,
  alignRight,
}: IStickyItemProps) => {
  return (
    <div className={cn(s.stickyItem, { textAlignRight, alignRightItemWithButton, alignRight })}>
      {title && <div className={s.stickyItem__title}>{title}</div>}
      {subTitle && <div className={s.stickyItem__subTitle}>{subTitle}</div>}
      {text && <div className={s.stickyItem__text}>{text}</div>}
      {subText && <div className={s.stickyItem__subText}>{subText}</div>}
      {React.Children.toArray(children).map((c) => React.cloneElement(c, { color }))}
    </div>
  );
};