// @flow
import React from 'react';
import type { {{upperCamelCase componentName}}Props } from './{{dashCase componentName}}.proptypes';
import { Box } from '{{relativeToSrc path}}primitives';

export const {{upperCamelCase componentName}} = ({
  className, 
  {{#block}}
  spacing,
  {{/block}}
  {{#container}}
  stacked,
  align,
  justify,
  wrap,
  children,
  {{/container}}
  {{#fluid}}
  grow,
  shrink,
  basis,
  {{/fluid}}
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
}: {{upperCamelCase componentName}}Props) => (
  <Box
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
    {{#block}}
    spacing={spacing}
    {{/block}}
    {{#container}}
    stacked={stacked}
    align={align}
    justify={justify}
    wrap={wrap}
    {{/container}}
    {{#fluid}}
    grow={grow}
    shrink={shrink}
    basis={basis}
    colorName="brand-secondary-bg"
    {{/fluid}}
  >
    Hello
    {{#container}}
    {children}
    {{/container}}
  </Box>
);

{{upperCamelCase componentName}}.displayName = '{{upperCamelCase componentName}}';
