import React from "react";
import PropTypes from "prop-types";
import { Content, LeftCard, RightCard, ProfileLayoutContainer, HeaderCard, MiddleCard } from "./ProfileLayout.styled";
import { Grid } from "@mui/material";

const ProfileLayout = (props) => {
  return (
    <ProfileLayoutContainer maxWidth={true}>
      {props.children}
      <Grid container lg={12} maxHeight="lg">
        <LeftCard item xs={2} lg={2.5} xl={2.4} md={3}>
          {props.leftCard}
        </LeftCard>
        <MiddleCard item xs={7.5} lg={6.5} xl={6.6} md={6}>
          <HeaderCard>
            {props.headerCard}
          </HeaderCard>
          <Content>
            {props.content}
          </Content>
        </MiddleCard>
        <RightCard item xs={2.5} lg={3} xl={3} md={3}>
            {props.rightCard}
        </RightCard>
      </Grid>
    </ProfileLayoutContainer>
  );
};

ProfileLayout.propTypes = {
  children: PropTypes.node,
  leftCard: PropTypes.node,
  content: PropTypes.node,
  rightCard: PropTypes.node,
  headerCard: PropTypes.node,
};

export default ProfileLayout;