import React from 'react';

interface AppContainerProps {
  children: React.ReactNode;
  title?: string;
  headerAction?: React.ReactNode;
  maxWidth?: string;
  padding?: string;
  className?: string;
}

export const AppContainer: React.FC<AppContainerProps> = ({
  children,
  title,
  headerAction,
  maxWidth = 'max-w-7xl',
  padding = 'px-4',
  className = '',
}) => {
  return (
    <div className={`w-full bg-white rounded-2xl p-5 ${maxWidth} mx-auto ${padding} ${className}`}>
      {/* Header with Title and Action */}
      {title && (
        <div className="flex justify-between items-center m-2 mb-2 pb-4 border-b border-gray-200">
          <h2 className="text-3xl font-bold bg-linear-to-r from-slate-700  to-emerald-500 bg-clip-text text-transparent p-3">
            {title}
          </h2>
          {headerAction && <div>{headerAction}</div>}
        </div>
      )}

      {/* Content */}
      <div className="bg-white rounded-lg p-6">
        {children}
      </div>
    </div>
  );
};