import { useThreekitInitStatus } from '@threekit-tools/treble/dist';
import React from 'react';
import ArBox from '../../assets/ArBox';
import BackArrow from '../../assets/BackArrow';
import s from './AnimatedHint.module.scss';
export const AnimatedHint = () => {
  const hasLoaded = useThreekitInitStatus();
  return (
    <>
      {hasLoaded && (
        <div className={s.wrapper}>
          <div className={s.picture__block}>
            <div className={s.left}>
              <BackArrow />
            </div>
            <div className={s.box}>
              <ArBox />
            </div>
            <div className={s.right}>
              <BackArrow />
            </div>
          </div>
          <div className={s.content}>Press the arrows to rotate the image</div>
        </div>
      )}
    </>
  );
};