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

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

type SectionProps = PropsWithChildren<
  CommonProps & {
    as?: 'div' | 'fieldset' | 'section';
    withHorizontalPadding?: boolean;
  }
> &
  Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby'>;

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

export default Section;