import { useTranslation } from 'react-i18next'

import nikumaru from '@/assets/fonts/nikumaru.otf'
import { translateUIMessage } from '@/lib/i18n'

import type { FC } from 'react'


const ROW_COUNT = 8
const COLUMN_COUNT = 12


const DevModeWatermark: FC = () => {
  const { i18n } = useTranslation ('shared')
  const text = translateUIMessage ('labels.development', 'shared', i18n.language)
  return (
      <div
	  aria-hidden="true"
	  className="pointer-events-none select-none fixed inset-0 overflow-hidden z-0">
	<style>{`
	  @font-face {
	    font-family: 'Nikumaru';
	    src: url(${nikumaru}) format('opentype');
	  }
	`}</style>
	<div className="absolute -inset-32 flex flex-col justify-center gap-12 py-48">
	  {Array.from ({ length: ROW_COUNT }, (_, rowIndex) => (
	      <div
		  key={rowIndex}
		  className={
		      'flex min-h-32 items-center gap-12 '
		      + (rowIndex % 2 === 0 ? 'translate-x-0' : 'translate-x-32')
		  }>
		{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
		    <span
			key={columnIndex}
			lang={text.language}
			className={
			    'whitespace-nowrap text-3xl font-bold '
			    + 'tracking-[0.3em] text-neutral-950/5 '
			    + 'dark:text-white/10'
			}
			style={{ fontFamily: 'Nikumaru' }}>
		      {text.text}
		    </span>))}
	      </div>))}
	</div>
      </div>)
}


export default DevModeWatermark