import React, { ReactNode } from 'react';
import classNames from 'classnames/bind';

import styles from './Layer.scss';
const cx = classNames.bind(styles);

interface IOwnProps {
  title: string;
  buttonText: string;
  onClickButton: () => void;
  children?: ReactNode;
  alignCenter?: boolean;
}

const Layer: React.FC<IOwnProps> = ({
  title,
  buttonText,
  onClickButton,
  children,
  alignCenter = true
}) => {
  return (
    <div className={cx('layer', alignCenter && 'center')}>
      <strong className={cx('title')}>{title}</strong>
      {children}
      <button type="button" onClick={onClickButton} className={cx('btn')}>{buttonText}</button>
    </div>
  );
};

export default Layer;
