import React__default, { useState, useEffect } from 'react';
import { B as Breakpoints } from './utils-32d7d5af.js';
import { _ as __rest } from './tslib.es6-ab63fd84.js';
import styled from '@emotion/styled';

const getIsMobile = () => {
    return (typeof window !== 'undefined' &&
        window.innerWidth < Breakpoints.BREAK_POINT_MOBILE);
};
const getIsLargeMobile = () => {
    return (typeof window !== 'undefined' &&
        window.innerWidth >= Breakpoints.BREAK_POINT_MOBILE &&
        window.innerWidth < Breakpoints.BREAK_POINT_PC);
};
const useScreenSize = () => {
    const [isMobile, setIsMobile] = useState(getIsMobile());
    const [isLargeMobile, setIsLargeMobile] = useState(getIsLargeMobile());
    useEffect(() => {
        const handleResize = () => {
            setIsMobile(getIsMobile());
            setIsLargeMobile(getIsLargeMobile());
        };
        window.addEventListener('resize', handleResize, {
            passive: true,
        });
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
    return { isMobile, isLargeMobile };
};

const ImageWrap = (_a) => {
    var { alt, backupSrc, src, placeholderSrc, style, ref } = _a, props = __rest(_a, ["alt", "backupSrc", "src", "placeholderSrc", "style", "ref"]);
    const [hasError, setHasError] = useState(false);
    return (React__default.createElement(StyledImage, Object.assign({ loading: "lazy", alt: alt, onError: () => !hasError && setHasError(true), src: hasError ? backupSrc || src : src || backupSrc, style: Object.assign(Object.assign({}, (placeholderSrc
            ? {
                backgroundImage: `url(${placeholderSrc})`,
            }
            : {})), style), "data-has-placeholder": !!placeholderSrc, ref: ref }, props)));
};
const StyledImage = styled.img `
  &[data-has-placeholder='true'] {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
`;

export { ImageWrap as I, useScreenSize as u };
