import React, { FunctionComponent, ReactNode } from "react";
// import CookieConsent from "react-cookie-consent";
// import { Link } from "gatsby"
import "./../styles/style.scss";
import { Footer } from "./footer";
import { NavBar } from "./navigation/navbar";
import { ProfilePicture } from "./profile-pic";

type Props = { children: ReactNode[] };

export const Layout: FunctionComponent<Props> = ({ children }) => {
  return (
    <div className="body-red">
      <div className="main-content">
        <div className="container no-padding">
          <div className="row">
            <div className="col-md-3 l-content">
              <ProfilePicture />
              <NavBar></NavBar>
            </div>

            <div className="col-md-9 r-content">
              <div className="flexslider">
                <div className="slides">
                  <div className="profile">
                    {children}
                    <div className="clearfix" />
                  </div>
                </div>
              </div>
              <Footer />
            </div>
          </div>
        </div>
      </div>
      {/* <CookieConsent
        style={{ background: "#2B373B" }}
        buttonStyle={{
          background: "#e74c3c",
          color: "white",
          fontWeight: "bolder",
        }}
      >
        <span>
          This website uses cookies to enhance the user experience.
              <span style={{ fontSize: "10px" }}>
            {" "}
                Click <Link to="/cookies">here</Link> to learn more about cookies.
              </span>
        </span>
      </CookieConsent> */}
    </div>
  );
};