"use client"
 
import * as React from "react"
 
import { useScript } from "@/hooks/use-script"
 
import ScriptMeta from "./script-meta"
 
export function Component() {
  const status = useScript(
    "https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js",
    {
      removeOnUnmount: false,
      customAttributes: {
        "data-uid": "useScript",
      },
    }
  )
 
  React.useEffect(() => {
    if (typeof window.$$ !== "undefined") {
      const id = document.id("moo")
      id.setStyle("background-color", "var(--green)")
    }
  }, [status])
 
  const isReady = status === "ready"
 
  return (
    <section>
      <h1>useScript</h1>
      <p>
        <span id="moo" className={isReady ? "ready" : ""} />
        <label>Status: {status}</label>
      </p>
      {status === "ready" && (
        <ScriptMeta title="MooTools" status={status} meta={window.MooTools} />
      )}
    </section>
  )
}

const stripeStatus = useScript("https://js.stripe.com/v3/")
const analyticsStatus = useScript("https://analytics.example.com/sdk.js")

const needsPayment = useAppSelector((state) => state.checkout.needsPayment)
const status = useScript(needsPayment ? PAYMENT_SCRIPT_URL : "")

const status = useScript("https://third-party-script.com/sdk.js")
 
useEffect(() => {
  if (status === "error") {
    showErrorToast("Failed to load required components")
  }
}, [status])