import clsx from 'clsx'
import {
  type ComponentProps,
  type HTMLAttributes,
  type PropsWithChildren,
  forwardRef,
} from 'react'

export const OuterContainer = forwardRef<
  HTMLDivElement,
  HTMLAttributes<HTMLDivElement>
>(function OuterContainer({ className, children, ...props }, ref) {
  return (
    <div ref={ref} className={clsx('sm:px-8', className)} {...props}>
      <div className="mx-auto max-w-7xl lg:px-8">{children}</div>
    </div>
  )
})

export const InnerContainer = forwardRef<
  HTMLDivElement,
  HTMLAttributes<HTMLDivElement>
>(function InnerContainer({ className, children, ...props }, ref) {
  return (
    <div
      ref={ref}
      className={clsx('relative px-4 sm:px-8 lg:px-12', className)}
      {...props}
    >
      <div className="mx-auto max-w-2xl lg:max-w-5xl">{children}</div>
    </div>
  )
})

export const Container: ReturnType<
  typeof forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>
> = forwardRef<HTMLDivElement>(function Container(
  {
    children,
    ...props
  }: PropsWithChildren<ComponentProps<typeof OuterContainer>>,
  ref,
) {
  return (
    <OuterContainer ref={ref} {...props}>
      <InnerContainer>{children}</InnerContainer>
    </OuterContainer>
  )
})