import type { ElementType, ReactNode } from "react";
import React from "react"; // Added import for React to use React.HTMLAttributes

interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
  children: ReactNode;
  className?: string;
  as?: ElementType;
  variant?: "narrow" | "wide"; // Add variant support
}

export function Container({
  children,
  className = "",
  as: Tag = "div",
  variant,
  ...props
}: ContainerProps) {
  const variantClass = variant === "narrow" ? "container--narrow" :
    variant === "wide" ? "container--wide" : "";

  return (
    <Tag
      className={`container ${variantClass} ${className}`.trim()}
      {...props}
    >
      {children}
    </Tag>
  );
}