// Page Container Component
import { ReactNode } from 'react';
import { clsx } from 'clsx';
import './PageContainer.css';

interface PageContainerProps {
  children: ReactNode;
  title?: string;
  actions?: ReactNode;
  className?: string;
}

export default function PageContainer({ children, title, actions, className }: PageContainerProps) {
  return (
    <div className={clsx('page-container', className)}>
      {(title || actions) && (
        <div className="page-container__header">
          {title && <h1 className="page-container__title">{title}</h1>}
          {actions && <div className="page-container__actions">{actions}</div>}
        </div>
      )}
      <div className="page-container__content">{children}</div>
    </div>
  );
}

