'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import DicePlane from './diceplane';
import { DEFAULT_ASSETS, getAssets } from './asset-storage';

export default function GamePage() {
  const [backgroundSrc, setBackgroundSrc] = useState(DEFAULT_ASSETS.background);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    setBackgroundSrc(getAssets().background);
    setReady(true);
  }, []);

  return (
    <div className="relative h-screen w-screen overflow-hidden">
      {ready && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={backgroundSrc}
          alt=""
          aria-hidden
          draggable={false}
          className="pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
        />
      )}
      <div className="absolute inset-0 z-0 bg-black/25" aria-hidden />

      <Link
        href="/"
        className="absolute top-3 left-3 z-40 rounded bg-black/70 px-3 py-1.5 text-sm text-white hover:bg-black/85"
      >
        설정으로
      </Link>

      <div className="relative z-10 h-full w-full">
        <DicePlane />
      </div>
    </div>
  );
}