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;
};

export default function Footer({ className, hasLeftPadding = 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} ref={footerRef}>
			<Mobile className={classes["mobile"]} />
			<Tablet className={classes["tablet"]} />
			<Desktop className={classes["desktop"]} />
		</footer>
	);
}