import { clsx } from 'clsx';
import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';

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

type ContainerOwnProps<T extends ElementType> = CommonProps & {
  /** Controls the maximum width: `fluid` (100%), `standard` (1160px), `narrow` (840px), `compact` (600px). @default 'standard' */
  size?: 'fluid' | 'standard' | 'narrow' | 'compact';
  as?: T;
};

export type ContainerProps<T extends ElementType = 'div'> = PropsWithChildren<
  ContainerOwnProps<T>
> &
  Omit<ComponentPropsWithRef<T>, keyof ContainerOwnProps<T> | 'children'>;

/**
 * Centers page content within a responsive max-width boundary, with automatic horizontal padding that adapts to the viewport size.
 *
 * **Design guidance**: <a href="https://docs.wise.design/foundations/grid" target="_blank">wise.design/foundations/grid</a>
 */
const Container = <T extends ElementType = 'div'>({
  size = 'standard',
  as,
  className,
  children,
  ...otherProps
}: ContainerProps<T>) => {
  const Element = as ?? 'div';
  return (
    <Element {...otherProps} className={clsx('wds-container', `wds-container--${size}`, className)}>
      {children}
    </Element>
  );
};

export default Container;
