import { clsx } from 'clsx';
import { PropsWithChildren } from 'react';

import { CommonProps } from '../common';

type SectionProps = PropsWithChildren<
  CommonProps & {
    as?: 'div' | 'fieldset';
    withHorizontalPadding?: boolean;
  }
>;

/**
 *
 * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
 *
 */
const Section = ({
  as: Element = 'div',
  children,
  className,
  withHorizontalPadding = false,
}: SectionProps) => {
  return (
    <Element
      className={clsx('np-section', className, {
        'np-section--with-horizontal-padding': withHorizontalPadding,
      })}
    >
      {children}
    </Element>
  );
};

export default Section;
