import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import React, { memo } from 'react';

export default memo(() => {
  const { placeholderImage } = getModule('placeholderImage');

  return (
    <>
      <div class='vz-dashboard-404-meta'>
        <div className='vz-dashboard-404-heading' style={ { '--vz-404-stacks': 3 } }>
          <span style={ { '--vz-404-index': 0 } }>404</span>
          <span style={ { '--vz-404-index': 1 } }>404</span>
          <span style={ { '--vz-404-index': 2 } }>404</span>
        </div>
        <div className='vz-dashboard-404-subheading'>
          Page Not Found
        </div>
        <div className='vz-dashboard-404-description'>
          Oh no! You're looking for something which just isn't here! Fear not however, errors are to be expected, and luckily there are tools on the sidebar for you to use in your search for what you need.
        </div>
      </div>
      <div className={joinClassNames('vz-dashboard-404-image', placeholderImage)} />
    </>
  );
});
