import React, { FC } from "react"
import styles from './index.module.scss';
import { getSystemStyle, SystemProps } from '../utils/systemProps';
import clsx from 'clsx';

interface Props extends SystemProps {
  size?: "sm" | "md" | "lg";
  className?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
};

const Viewport : FC<Props> = ({children, className, style, size, ...systemProps}) => {
  style = getSystemStyle(systemProps, style);

  const _size : string = size || "md";
  const sizeClass : string = styles['viewport-' + _size];

  return (
    <div
        className={clsx(sizeClass, className)}
        style={style}
    >
      {children}
    </div>
  )
};

export default Viewport;