import styled from "styled-components";
import { useMemo } from "react";
import { breakpoints, useMediaSelectTo } from "../../utils/responsive";
import { ImageWrapper, VideoWrapper } from "../../components/MediaWrapper";

function Background({ bg, bg_m, className, ...props }) {
    const isMobile = useMediaSelectTo(breakpoints.sm);

    const component = useMemo(() => {
        if (typeof isMobile !== "boolean") {
            return null;
        }

        let usedBg = bg;
        if (isMobile) {
            usedBg = bg_m;
        }

        // if is mp4 or webm, return VideoWrapper
        if (usedBg.includes("mp4") || usedBg.includes("webm")) {
            return <VideoWrapper className={className} src={usedBg} autoPlay loop muted playsInline />;
        }
        // if is jpg or png, return ImageWrapper
        return <ImageWrapper {...props} src={usedBg} className={className} />;
    }, [bg, bg_m, isMobile]);

    return component;
}

export default Background;