import { PixelGrid } from '@/components/PixelGrid';
import { useThemeAsset } from '@/components/ui/ThemeProvider';

/**
 * The page behind everything, owned by the theme rather than by this file.
 *
 * It used to hardcode `url('/landscape1.webp')`. That one line was most of what "the app looks like
 * Officer" meant, and no theme could reach it — under the Plain theme every panel went white and the
 * photograph stayed, which is how it was found.
 *
 * ── Why the path is read from CSS rather than written in CSS ──
 *
 * The natural form is `--page-bg-image: url('/landscape1.webp')`, and it fails the build: Bun's CSS
 * bundler resolves `url()` at build time, while this file is served from `public/` at runtime. So the theme
 * publishes a quoted PATH — a string token the bundler ignores — and this wraps it.
 *
 * Re-read when the theme changes, because a custom property is not something React can subscribe to.
 */
export function Background() {
  const src = useThemeAsset('--page-bg-src');

  return (
    <div
      className="absolute inset-0 z-0"
      style={{
        backgroundImage: src ? `url(${src})` : 'none',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
      }}
    >
      <PixelGrid />
    </div>
  );
}