SolarFlare

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

type SolarFlareProps = {
  children?: ReactNode;
  className?: string;
  /** Colour of the sun and its rays. */
  color?: string;
  /** Outer colour of the sun's glow. */
  accent?: string;
  background?: string;
  /** Sun width in pixels. */
  size?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

/* SolarFlare: a sun rising over the top edge, with slow turning rays and a pulsing core. */
export function SolarFlare({
  children,
  className = "",
  color = "#fbbf24",
  accent = "#f97316",
  background = "#0c0705",
  size = 180,
  speed = 1,
}: SolarFlareProps) {
  const reduce = useReducedMotion();
  const rays = `repeating-conic-gradient(color-mix(in srgb, ${color} 30%, transparent) 0deg 4deg, transparent 4deg 18deg)`;
  const raysMask = "radial-gradient(circle, black 15%, transparent 65%)";
  const core = `radial-gradient(circle, #fff7e0 0%, ${color} 30%, ${accent} 55%, transparent 72%)`;

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: `radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, ${accent} 30%, transparent), transparent)` }}
      />
      <motion.div
        aria-hidden
        className="absolute inset-x-0 mx-auto rounded-full"
        style={{ width: size * 3.5, height: size * 3.5, top: -size * 1.75, background: rays, maskImage: raysMask, WebkitMaskImage: raysMask }}
        animate={reduce ? undefined : { rotate: 360 }}
        transition={{ duration: 80 / speed, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        aria-hidden
        className="absolute inset-x-0 mx-auto rounded-full"
        style={{ width: size * 1.6, height: size * 1.6, top: -size * 0.8, background: core }}
        animate={reduce ? undefined : { scale: [1, 1.07, 1], opacity: [0.9, 1, 0.9] }}
        transition={{ duration: 4 / speed, repeat: Infinity, ease: "easeInOut" }}
      />
      <div className="relative h-full">{children}</div>
    </div>
  );
}