"use client"

import { useMemo } from "react"

interface Star {
  left: number
  top: number
  size: number
  delay: number
  duration: number
}

export function StarField() {
  const stars = useMemo<Star[]>(() => {
    const result: Star[] = []
    for (let i = 0; i < 160; i++) {
      result.push({
        left: Math.random() * 100,
        top: Math.random() * 100,
        size: 1.5 + Math.random() * 2,
        delay: Math.random() * 6,
        duration: 3 + Math.random() * 4,
      })
    }
    return result
  }, [])

  return (
    <div className="fixed inset-0 pointer-events-none select-none z-0 overflow-hidden">
      {stars.map((s, i) => (
        <div
          key={i}
          className="absolute rounded-full bg-[#222222] dark:bg-white star-twinkle"
          style={{
            left: `${s.left}%`,
            top: `${s.top}%`,
            width: `${s.size}px`,
            height: `${s.size}px`,
            opacity: 0.35 + Math.random() * 0.45,
            animationDelay: `${s.delay}s`,
            animationDuration: `${s.duration}s`,
          }}
        />
      ))}
    </div>
  )
}