"use client"

/**
 * WhatsNewLeoHero — media slot for the compact What's new sheet.
 *
 * Leo `invited` gesture (one-shot on `playKey`) plus a single DotPattern
 * spotlight burst from the centre. No product screenshot.
 */

import * as React from "react"

import { cn } from "../../lib/utils"
import { DotPattern } from "./dot-pattern"
import { LeoIcon } from "./leo-icon"

function brandMediaWash(color: string): string {
  return `linear-gradient(
    145deg,
    color-mix(in oklch, ${color} 36%, var(--background)) 0%,
    color-mix(in oklch, ${color} 16%, var(--background)) 55%,
    var(--background) 100%
  )`
}

export function WhatsNewLeoHero({
  brandColor,
  playKey,
  className,
}: {
  brandColor: string
  /** Bump when the sheet opens to replay the one-shot icon + dot burst. */
  playKey: string | number
  className?: string
}) {
  const [burstKey, setBurstKey] = React.useState(0)

  React.useEffect(() => {
    setBurstKey(0)
    const frame = requestAnimationFrame(() => setBurstKey(1))
    return () => cancelAnimationFrame(frame)
  }, [playKey])

  return (
    <div
      className={cn(
        "relative flex size-full items-center justify-center overflow-hidden",
        className,
      )}
      style={{ backgroundImage: brandMediaWash(brandColor) }}
    >
      <DotPattern
        cursorSpotlight
        scatter
        scatterDensity={1.15}
        spotlightX={50}
        spotlightY={50}
        spotlightActive
        spotlightBurstKey={burstKey}
        glowRadius={110}
        className="absolute inset-0 size-full fill-brand/55 dark:fill-brand/65"
      />
      <span
        className="relative z-10 inline-flex items-center justify-center [--leo-icon-fill:var(--brand-color)]"
        style={{ "--brand-color": brandColor } as React.CSSProperties}
      >
        <LeoIcon key={playKey} variant="ambient" size="xl" state="invited" />
      </span>
    </div>
  )
}