import * as React from "react";
import { get } from "lodash";

import { style } from "./style";
import { default as defaultData } from "./data.json";

import { doIShow, combineData } from "../../utils";

import theme from "../../theme";

import {
  Block,
  Section,
  Headline,
  Text,
  Container,
  Button,
  Grid,
  GridItem,
  ListItem,
  List,
} from "@sc/plugins/webcomponents/v2";

type LayoutProps = {
  data: any;
};

const Layout: React.FC<LayoutProps> = ({ data }) => {
  const initialContent = {
    main_headline: {
      html: "Headline Goes Here",
    },
    sub_headline: {
      html: "Sub Headline Text Content Goes Here",
    },
  };

  const content = combineData(initialContent, defaultData, data);

  return (
    <Block>
      <Section style={style.SECTION}>
        <Container
          style={{
            ...style.SECTION_INNER,
            maxWidth: get(data, "section.pageMargin"),
          }}
        >
          <Grid spacing={10}>
            <GridItem xs={5}>
              <Container style={{ paddingRight: 30 }}>
                <Headline style={style.HEADLINE}>
                  High fidelity wireframes
                </Headline>
                <Text style={style.TEXT}>
                  The navigation design should communciate the relationship the
                  links it contains so that users
                </Text>
              </Container>
            </GridItem>
            <GridItem xs={7}>
              <Text style={style.TEXT}>
                High fidelity wireframes include more real content, specific
                typography choices, and information on image dimensions. Unlike
                low fidelity wireframes, high fidelity wireframes can include
                actual images. Color choices are not included, but different
                values in color can be represented in grayscale.
                <br />
                <br />
                High fidelity wireframes include more real content, specific
                typography choices, and information on image
              </Text>
            </GridItem>
          </Grid>
        </Container>
      </Section>
    </Block>
  );
};

export default Layout;