import React, { ReactNode } from "react";
import styles from "./container.module.css";

export interface ContainerProps {
  /** Content inside the container */
  children: ReactNode;

  /** Optional: customize max width (e.g. "800px", "100%" etc.) */
  maxWidth?: string;

  /** Optional: add extra class for styling */
  className?: string;

  /** Optional: if true, removes default padding */
  noPadding?: boolean;

  /** Optional: centers content vertically and horizontally */
  center?: boolean;
}

/**
 * A global layout container for wrapping pages or sections
 * Provides consistent spacing, max-width, and responsive alignment.
 */
export function Container({
  children,
  maxWidth = "1200px",
  className = "",
  noPadding = false,
  center = false,
}: ContainerProps) {
  const classes = [
    styles.container,
    noPadding ? styles.noPadding : "",
    center ? styles.center : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={classes} style={{ maxWidth }}>
      {children}
    </div>
  );
}

export default Container;