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) {
	const footerRef = React.useRef<HTMLDivElement>(null);
	useEffect(() => {
		if (!footerRef.current) return;
		const footerHeight = footerRef.current.clientHeight + 1;
		document.documentElement.style.setProperty("--footer-height", `${footerHeight}px`);
	});
	return (
		<footer
			className={[classes["root"], className].join(" ")}
			data-has-left-padding={hasLeftPadding}
			data-is-sticky={isSticky}
			ref={footerRef}>
			<Mobile className={classes["mobile"]} />
			<Tablet className={classes["tablet"]} />
			<Desktop className={classes["desktop"]} />
		</footer>
	);
}
