import React, { forwardRef, ElementRef } from "react"
import {
  PageContainerVariants,
  pageContainerVariants,
} from "../../styles/utils"
import { classNames } from "../../utils"
import { Block, BlockProps } from "../Block"

export type ContainerProps = Omit<BlockProps, "padding"> & PageContainerVariants

/**
 * A centered container for a page with a max width.
 */
export const Container = forwardRef<ElementRef<typeof Block>, ContainerProps>(
  function Container({ className, padding, ...rest }, ref) {
    return (
      <Block
        className={classNames(pageContainerVariants({ padding }), className)}
        ref={ref}
        {...rest}
      />
    )
  },
)