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

export interface EcommerceLayoutProps {
  header?: ReactNode;
  navigation?: ReactNode;
  sidebar?: ReactNode;
  mainContent: ReactNode;
  footer?: ReactNode;
}

export function EcommerceLayout({ 
  header, 
  navigation,
  sidebar, 
  mainContent,
  footer 
}: EcommerceLayoutProps) {
  return (
    <div className="shared-layout shared-layout--ecommerce">
      {header && <header className="shared-layout__header">{header}</header>}
      {navigation && <nav className="shared-layout__navigation">{navigation}</nav>}
      <div className="shared-layout__content">
        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
        <main className="shared-layout__main">{mainContent}</main>
      </div>
      {footer && <footer className="shared-layout__footer">{footer}</footer>}
    </div>
  );
}