import React from 'react';
import classnames from 'classnames';

interface Props {
	kolonnefri?: boolean;
	children: React.ReactNode;
	grafarge?: boolean;
	avstand?: boolean;
	avstandOver?: string;
	sentrert?: boolean;
	klasse?: string;
	ingenBottomMargin?: boolean;
}

export function Ramme(props: Props) {
	const {
		kolonnefri,
		children,
		grafarge,
		avstand,
		avstandOver,
		sentrert,
		klasse,
		ingenBottomMargin = false,
	} = props;

	function renderInni() {
		const klasser = classnames({
			'col-md-12': !kolonnefri,
		});
		return klasser.length > 0 ? (
			<div className={klasser}>{children}</div>
		) : (
			children
		);
	}

	function renderMellom() {
		return (
			<div className="container">
				<div className="row">{renderInni()}</div>
			</div>
		);
	}

	const klasser = classnames(klasse, {
		'util-sekundaer': grafarge,
		'util-graa-light': !grafarge,
		'banner-blokk': avstand || avstandOver,
		'util-tekst-sentrert': sentrert,
		'ingen-luft-under': ingenBottomMargin,
	});

	var stilsett = {
		paddingBottom: avstandOver && '0',
	};
	return klasser.length > 0 ? (
		<div className={klasser} style={stilsett}>
			{renderMellom()}
		</div>
	) : (
		renderMellom()
	);
}