import type { ReactNode } from 'react';
import './layouts.css';

export interface MagazineLayoutProps {
  header?: ReactNode;
  featured?: ReactNode;
  sidebar?: ReactNode;
  mainContent: ReactNode;
  footer?: ReactNode;
}

export function MagazineLayout({ 
  header, 
  featured,
  sidebar, 
  mainContent,
  footer 
}: MagazineLayoutProps) {
  return (
    <div className="shared-layout shared-layout--magazine">
      {header && <header className="shared-layout__header">{header}</header>}
      {featured && <section className="shared-layout__featured">{featured}</section>}
      <div className="shared-layout__content">
        <main className="shared-layout__main">{mainContent}</main>
        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
      </div>
      {footer && <footer className="shared-layout__footer">{footer}</footer>}
    </div>
  );
}

