import { Content } from "antd/lib/layout/layout";
import { Row, Button } from "antd";

const DefaultLayout = ({ children, multipleButtonData }) => {
  const styles = {
    padding: {
      marginLeft: 15,
      marginRight: 15,
      marginTop: 10,
    },
    content: {
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      minHeight: 280,
      borderRadius: 5,
    },
  };

  return (
    <>
      <div style={styles.padding}>
        <Row style={{ justifyContent: "space-between" }}>
          {multipleButtonData ? (
            <div className="ed-lista-botones">
              {multipleButtonData.map((item, index) => (
                <Button
                  key={index}
                  tabIndex={index}
                  style={{ backgroundColor: item.color, color: item.texColor }}
                  onClick={item.to ? item.to : undefined}
                  {...item.props}
                  block
                >
                  {item.icon} {item.text}
                </Button>
              ))}
            </div>
          ) : null}
        </Row>
        <Content className="site-layout-background" style={styles.content}>
          {children}
        </Content>
      </div>
    </>
  );
};

export default DefaultLayout;