import React from 'react';
import StatisticsSection from './StatisticsSection';
import ContentSection from './ContentSection';
import LearningGraphSection from './LearningGraphSection';

const Layout = () => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'row',
      width: '100%',
      minHeight: '100vh',
      padding: '80px',
      backgroundColor: '#f5f7fa', // Adjusted background color for closer match
    }}>
      <div style={{
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'column',
        gap: '32px',
        justifyContent: 'center', // Center align vertically
        alignItems: 'center', // Center align horizontally
      }}>
        <StatisticsSection />
        <LearningGraphSection />
      </div>
      <div style={{
        flexGrow: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        paddingLeft: '40px', // Added padding for spacing
      }}>
        <ContentSection />
      </div>
    </div>
  );
};

export default Layout;

