"use client";

import { useEffect, useState } from "react";

/**
 * Hook that returns true only after component has mounted on the client.
 * Useful for avoiding SSR hydration mismatches with browser-only APIs.
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const isClient = useClientOnly()
 *   if (!isClient) return null
 *   // Safe to use browser APIs here
 *   return <div>{window.innerWidth}</div>
 * }
 * ```
 */
export function useClientOnly(): boolean {
	const [isClient, setIsClient] = useState(false);

	useEffect(() => {
		setIsClient(true);
	}, []);

	return isClient;
}

/**
 * Check if code is running on the server (SSR).
 * This is a simple check that doesn't cause hydration issues.
 */
export function isServer(): boolean {
	return typeof window === "undefined";
}

/**
 * Check if code is running on the client (browser).
 * This is a simple check that doesn't cause hydration issues.
 */
export function isClient(): boolean {
	return typeof window !== "undefined";
}