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

export type Props = {
    size?: "sm" | "md" | "lg";
    className?: string;
    children?: React.ReactNode;
};

const Viewport : FC<Props> = ({children, className, size}) => {
    const _size : string = size || "md";
    const sizeClass : string = styles['viewport-' + _size];

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

export default Viewport;