'use client';

import { type COBEOptions } from 'cobe';

import { Globe } from '@/components/ui/globe';

// Rotation per frame. Default globe is 0.005; lower is slower, 0 stops it.
const GLOBE_SPEED = 0.003;

const globeConfig: COBEOptions = {
  width: 800,
  height: 800,
  onRender: () => {},
  devicePixelRatio: 2,
  phi: 0,
  theta: 0.22,
  dark: 1,
  diffuse: 1.2,
  mapSamples: 20000,
  mapBrightness: 5,
  baseColor: [0.22, 0.22, 0.22],
  markerColor: [1, 1, 1],
  glowColor: [0.1, 0.1, 0.1],
  markers: [
    { location: [37.7749, -122.4194], size: 0.08 },
    { location: [40.7128, -74.006], size: 0.06 },
    { location: [51.5072, -0.1276], size: 0.07 },
    { location: [48.8566, 2.3522], size: 0.05 },
    { location: [1.3521, 103.8198], size: 0.08 },
    { location: [35.6762, 139.6503], size: 0.06 },
    { location: [-33.8688, 151.2093], size: 0.05 },
    { location: [-23.5505, -46.6333], size: 0.06 },
  ],
};

export function StatsGlobe() {
  return (
    <div
      aria-hidden="true"
      className="pointer-events-none absolute inset-0 overflow-hidden [mask-image:radial-gradient(ellipse_80%_110%_at_50%_90%,black_45%,transparent_100%)]"
    >
      <div className="absolute left-1/2 top-[6%] aspect-square w-[760px] -translate-x-1/2 opacity-90 sm:w-[1040px] lg:w-[1280px]">
        <Globe className="max-w-none" config={globeConfig} speed={GLOBE_SPEED} />
      </div>
      <div className="absolute inset-x-0 bottom-0 h-1/3 bg-linear-to-t from-black/80 to-transparent" />
    </div>
  );
}