import React from 'react';
import styled from 'styled-components';

export enum RPGUIContainerTypes {
  Framed = 'framed',
  FramedGold = 'framed-golden',
  FramedGold2 = 'framed-golden-2',
  FramedGrey = 'framed-grey',
}
export interface IRPGUIContainerProps {
  type: RPGUIContainerTypes;
  children: React.ReactNode;
  width?: string;
  height?: string;
  className?: string;
}

export const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({
  children,
  type,
  width = '50%',
  height,
  className,
}) => {
  return (
    <Container
      width={width}
      height={height || 'auto'}
      className={`rpgui-container ${type} ${className}`}
    >
      {children}
    </Container>
  );
};

interface IContainerProps {
  width: string;
  height: string;
}

const Container = styled.div<IContainerProps>`
  height: ${props => props.height};
  width: ${({ width }) => width};
  display: flex;
  flex-wrap: wrap;
  image-rendering: pixelated;
`;
