import { Component, Prop, h, Host } from '@stencil/core';
import { decorateLayoutStyles } from '../../utils/utils';

@Component({
  tag: 'scu-stack',
  styleUrl: 'scu-stack.scss',
  shadow: true
})

export class SCUStack {

  // =======START LAYOUT========
  // spacing increment default, then col or colvw, then 10px or auto.
  @Prop({ reflect: true }) padding: string;
  @Prop({ reflect: true }) margin: string;
  @Prop({ reflect: true }) width: string;
  @Prop({ reflect: true }) height: string;
  @Prop({ reflect: true }) gap: number = 0;
  // ========END LAYOUT=========

  render() {
    const style = {};

    decorateLayoutStyles(
      style,
      this.padding,
      this.margin,
      this.gap,
      this.width,
      this.height
    );

    return (
      <Host style={style}>
        <slot /> 
      </Host>
    ); 
  } 
}