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

export interface DefaultLayoutProps {
  hero?: ReactNode;
  sections: ReactNode[];
  sidebar?: ReactNode;
}

export function DefaultLayout({ hero, sections, sidebar }: DefaultLayoutProps) {
  return (
    <div className="shared-layout">
      {hero && <div className="shared-layout__hero">{hero}</div>}
      <div className="shared-layout__body">
        <div className="shared-layout__main">
          {sections.map((section, index) => (
            <div key={index} className="shared-layout__section">
              {section}
            </div>
          ))}
        </div>
        {sidebar && <aside className="shared-layout__sidebar">{sidebar}</aside>}
      </div>
    </div>
  );
}