import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import Mobile from "./mobile";
import Desktop from "./desktop";
import Tablet from "./tablet";

type IProps = {
	className?: string;
	hasLeftPadding?: boolean;
	isSticky?: boolean;
};

export default function Footer({ className, hasLeftPadding = false, isSticky = false }: IProps) {
	useEffect(() => {
		document.documentElement.style.setProperty("--footer-height", `43px`);
	});
	return (
		<footer className={[classes["root"], className].join(" ")} data-has-left-padding={hasLeftPadding} data-is-sticky={isSticky}>
			<Mobile className={classes["mobile"]} />
			<Tablet className={classes["tablet"]} />
			<Desktop className={classes["desktop"]} />
		</footer>
	);
}