"use client"
 
import { useDomReady } from "@/hooks/use-dom-ready"
 
export function Component() {
  useDomReady(() => {
    console.log("DOM is interactive or complete!")
    // Example: Initialize a DOM-dependent library
    const element = document.getElementById("my-element")
    if (element) {
      element.style.backgroundColor = "blue"
    }
  })
 
  return (
    <div style={{ padding: "20px", maxWidth: "600px", margin: "0 auto" }}>
      <p>This component will log a message when the DOM is ready.</p>
      <div
        id="my-element"
        style={{ height: "100px", backgroundColor: "lightgray" }}
      >
        My Element
      </div>
    </div>
  )
}