import Box from '@mui/material/Box';
import {Center, MantineProvider, Image, Text} from '@mantine/core';
import { ImageHotspotViewer } from 'react-image-hotspot-viewer';
import testEva from '../Images/testEva.jpg';
import './App.css'

export default function App() {
  const testlink = <Image src='https://hips.hearstapps.com/hmg-prod/images/gh-best-skincare-products-6557978b58b57.png?crop=1.00xw:1.00xh;0,0&resize=1200:*' height={"100px"} />
  const hotspots = [{
  id: 1,
  title: 'Cheeks',
  description: <>{testlink}<Text size="md" fw="bold">ABC</Text></>,
  image:'https://hips.hearstapps.com/hmg-prod/images/gh-best-skincare-products-6557978b58b57.png?crop=1.00xw:1.00xh;0,0&resize=1200:*',
  position: {
    top: `45%`,
    left: `42%`,
  },
  action: {
    hasAction: true,
    type: 'link',
    url: 'https://www.google.com',
    label: 'View Product Details',
    icon: 'open_in_new',
  }
}, {
  id: 2,
  title: 'Nose',
  description: 'Nose Product',
  position: {
    top: `45%`,
    left: `51%`
  },
  action: {
    hasAction: false,
  }
},{id:3,
  title:'Eyes',
  description:'Eyes Product',
  position: 
    {
    top: `40%`,
    left: `43.5%`
  },
  action:{
    hasAction:true,
    type:'link',
    url:'https://www.google.com',
    label:'testimagesetes',
  }
},{
  id: 4,
  title: 'Lips',
  description: 'Lips Product',
  position: {
    top: `50%`,
    left: `51%`
  },
  action: {
    hasAction: false,
  }
}]

  return (
    <MantineProvider>
      <ImageHotspotViewer
        image={testEva} 
        hotspots={hotspots}
        imageStyles={{
          // width:"50vw",
          // height:"50vh",
          border:'2px black solid',
          borderRadius :"10%"
        }}
        />
        </MantineProvider>
  );
}
