import styles from './Block.module.scss';

import cn from 'classnames/bind';

import React, { FC, HTMLAttributes } from 'react';

interface BlockProps extends HTMLAttributes<HTMLElement> {
  bordered?: boolean;
  shadowed?: boolean;
  withBackground?: boolean;
  hover?: boolean;
  fullWidth?: boolean;
}

const cx = cn.bind(styles);

const Block: FC<BlockProps> = (props) => {
  const {
    children,
    style,
    className,
    bordered = false,
    fullWidth = false,
    hover = false,
    shadowed = false,
    withBackground = false,
    ...rest
  } = props;

  return (
    <div
      className={cx('root', className, {
        root_bordered: bordered,
        root_shadowed: shadowed,
        'root--fullWidth': fullWidth,
        'root--withBackground': withBackground,
        'root--hover': hover,
      })}
      style={style}
      {...rest}
    >
      {children}
    </div>
  );
};

export default Block;