import "@compiled/react";
import { BoxStyles } from "../components/class-names-box";
import { Button } from "../components/styled-button";
import { secondary, primary } from "../style/colors";

const IndexPage = () => (
  <BoxStyles>
    {(props) => (
      <div {...props}>
        <Button color={secondary}>Styled button</Button>

        <div
          css={{
            marginTop: 8,
            flexGrow: 1,
            height: "100%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontFamily: "sans-serif",
            color: primary,
            border: `1px solid ${primary}`,
          }}
        >
          CSS prop
        </div>
      </div>
    )}
  </BoxStyles>
);

export default IndexPage;