"use client"
 
import * as React from "react"
import { url } from "@/config"
 
import { useSocket } from "@/hooks/use-socket"
 
export function Component() {
  const { socket, isConnected, connect, disconnect } = useSocket(url, {
    reconnectionDelay: 5000,
    reconnection: true,
  })
 
  React.useEffect(() => {
    if (socket) {
      socket.on("message", (data) => {
        console.log("Received message:", data)
      })
    }
 
    return () => {
      if (socket) {
        socket.off("message")
      }
    }
  }, [socket])
 
  return (
    <div>
      <div>Status: {isConnected ? "🟢 Connected" : "🔴 Disconnected"}</div>
      {isConnected ? (
        <button variant="destructive" onClick={disconnect}>
          Disconnect
        </button>
      ) : (
        <button onClick={connect}>Connect</button>
      )}
      <button
        onClick={() => {
          if (socket) {
            socket.emit("message", { message: "Hello from useKit!" })
          }
        }}
      >
        Send Message
      </button>
      <p>Open the console to see the logs</p>
    </div>
  )
}