import '@mantine/core/styles.css';

import { Box, Center, Image, MantineProvider, Overlay, em } from '@mantine/core';
import { theme } from './theme';
import HotspotPicture from './components/HotspotPicture';
import BannerImage from '../Images/VJB-Banner.jpg';
import { useMediaQuery } from '@mantine/hooks';
import { useEffect, useRef, useState } from 'react';
import CosmeticProductCard from './components/CosmeticProductCard';

import clientPhoto from '../Images/client/eva.jpg';

export default function App() {
  const isMobile = useMediaQuery(`(max-width: ${em(750)})`);
  const imageRef = useRef(null);
  const [imageHeight, setImageHeight] = useState(null);

  useEffect(() => {
    const img = imageRef.current;
    if (!img) return;

    const updateHeight = () => setImageHeight(img.offsetHeight);

    if (img.complete) {
      updateHeight(); // already loaded
    } else {
      img.addEventListener('load', updateHeight);
      return () => img.removeEventListener('load', updateHeight);
    }
  }, []);

  return (
    <MantineProvider theme={theme}>
      <Box bg={"black"} p={0} m={0} style={{borderBottom : "gold 2px solid"}}>

      <Image src={BannerImage} ref={imageRef} fit='contain' h={"5vh"} m={0} p={0}/>
      </Box>
      <Overlay p={10} m={0} top={imageHeight} gradient="linear-gradient(145deg, rgba(198, 78, 178, 1) 0%, rgba(170, 78, 171, 0.2) 100%)">
        <Center>
          <HotspotPicture/>
        </Center>
      </Overlay>
    </MantineProvider>
  );
}