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

type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';

interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: ContainerSize;
  as?: React.ElementType;
  children: React.ReactNode;
}

const SIZE_MAP: Record<ContainerSize, string> = {
  sm: 'max-w-4xl',
  md: 'max-w-5xl',
  lg: 'max-w-6xl',
  xl: 'max-w-7xl',
  '2xl': 'max-w-screen-2xl',
  full: 'max-w-full',
};

const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
  ({ size = 'lg', as: Component = 'div', className, children, ...props }, ref) => {
    const classes = clsx('mx-auto px-4 sm:px-6 lg:px-8', SIZE_MAP[size], className);

    return (
      <Component ref={ref} className={classes} {...props}>
        {children}
      </Component>
    );
  }
);

Container.displayName = 'Container';

export default Container;