import type { ElementType, ReactNode } from "react";

type ContainerVariant = "default" | "narrow" | "wide";

interface ContainerProps {
  children: ReactNode;
  className?: string;
  as?: ElementType;
  variant?: ContainerVariant;
}

const variantClasses: Record<ContainerVariant, string> = {
  default: "container",
  narrow: "container container--narrow",
  wide: "container container--wide",
};

export function Container({
  children,
  className = "",
  as: Tag = "div",
  variant = "default",
}: ContainerProps) {
  return (
    <Tag className={`${variantClasses[variant]} ${className}`.trim()}>
      {children}
    </Tag>
  );
}