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

export interface BlogLayoutProps {
  header?: ReactNode;
  sidebar?: ReactNode;
  mainContent: ReactNode;
  footer?: ReactNode;
  sidebarPosition?: 'left' | 'right';
}

export function BlogLayout({ 
  header, 
  sidebar, 
  mainContent,
  footer,
  sidebarPosition = 'right'
}: BlogLayoutProps) {
  return (
    <div className={`shared-layout shared-layout--blog shared-layout--sidebar-${sidebarPosition}`}>
      {header && <header className="shared-layout__header">{header}</header>}
      <div className="shared-layout__content">
        {sidebar && sidebarPosition === 'left' && (
          <aside className="shared-layout__sidebar">{sidebar}</aside>
        )}
        <main className="shared-layout__main">{mainContent}</main>
        {sidebar && sidebarPosition === 'right' && (
          <aside className="shared-layout__sidebar">{sidebar}</aside>
        )}
      </div>
      {footer && <footer className="shared-layout__footer">{footer}</footer>}
    </div>
  );
}

