import { BackTop, Layout as _Layout } from "tiny-ui";
import { Menu } from ".";

const { Header, Footer, Content } = _Layout;

const layoutStyle = {
  marginBottom: "2rem"
};

const headerStyle = {
  position: "sticky",
  top: "0"
};

const contentStyle = {
  minHeight: "200px",
  lineHeight: "1rem"
};

const footerStyle = {
  textAlign: "right",
  fontSize: ".8rem",
  color: "rgba(255,255,255,0.75)"
};

const Layout = ({ page, children, ...rest }) => {
  return (
    <_Layout style={layoutStyle}>
      <Header style={headerStyle}>
        <Menu page={page} />
      </Header>
      <Content style={contentStyle}>{children}</Content>
      <Footer style={footerStyle}>
        &copy;2023 Hendrickson Hawk Band - Power Line
      </Footer>
      <BackTop visibilityHeight={100} />
    </_Layout>
  );
};

export default Layout;