import React from "react";
import PropTypes from "prop-types";
import {
  Content,
  RightCard,
  ItemDetailsLayoutContainer,
} from "./ItemDetailsLayout.styled";
import { Grid } from "@mui/material";

const ItemDetailsLayout = (props) => {
  return (
    <ItemDetailsLayoutContainer>
      {props.children}
      <Grid container maxHeight="xl" spacing={2}>
        <Content item xs={12} lg={9} xl={9.6} md={12}>
          {props.content}
        </Content>
        <RightCard item xs={12} lg={3} xl={2.4} md={12}>
          {props.rightCard}
        </RightCard>
      </Grid>
    </ItemDetailsLayoutContainer>
  );
};

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

export default ItemDetailsLayout;
