import { DuckAvatar } from './DuckAvatar';
import { PixelGrid } from '@/components/PixelGrid';
import { useGlobal } from 'hooks/useGlobal';
const landscapebg = '/landscape1.webp';

export function Background() {
  const [duckHidden] = useGlobal('DUCK_HIDDEN', false);

  return (
    <div
      className="absolute inset-0 z-0"
      style={{
        backgroundImage: `url(${landscapebg})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
      }}
    >
      <PixelGrid />
      {!duckHidden && <DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />}
    </div>
  );
}