import { tv, VariantProps } from "../../utils"

// A sensible container for page content. It centers the content and constrains the width.
export const pageContainerVariants = tv({
  base: "mx-auto min-h-0 w-full min-w-0",
  variants: {
    padding: {
      default: "px-4 lg:px-6 max-w-[calc(theme(screens.4xl)+48px)]",
      left: "pl-4 lg:pl-6 max-w-[calc(theme(screens.4xl)+48px)]",
      right: "pr-4 lg:pr-6 max-w-[calc(theme(screens.4xl)+48px)]",
      none: "px-0 max-w-screen-4xl",
    },
  },
  defaultVariants: {
    padding: "default",
  },
})

// For backward compatibility
export const pageContainerClassName = pageContainerVariants()

export type PageContainerVariants = VariantProps<typeof pageContainerVariants>