import { HTMLAttributes } from "react";
import * as React from "react";
import styled from "styled-components";
import { GlobalStyle } from "./../src/design-system/global-style";

const GlobalStyleProxy: any = GlobalStyle;
const Container = styled.div<HTMLAttributes<HTMLDivElement>>(() => ({
  display: "flex",
  gap: "10px",
  flexWrap: "wrap",
  padding: "1.5rem",
}));

export const StoryLayout: React.FC<HTMLAttributes<HTMLDivElement>> = rest => (
  <>
    <GlobalStyleProxy />
    <Container {...rest} />
  </>
);

export const StoryWrapper = styled.div`
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
`;

export const StoryColumn = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
`;