"use client";

import { useEffect, useState } from "react";

export function usePerformance() {
  const [metrics, setMetrics] = useState({
    loadTime: 0,
    renderTime: 0,
    firstContentfulPaint: 0,
  });

  useEffect(() => {
    if (typeof window === "undefined") return;

    // Page Load Time
    const loadTime =
      window.performance.timing.loadEventEnd -
      window.performance.timing.navigationStart;

    // First Contentful Paint
    const paintEntries = performance.getEntriesByType(
      "paint"
    ) as PerformancePaintTiming[];
    const fcp = paintEntries.find((entry) => entry.name === "first-contentful-paint");

    // Render Time
    const renderTime = performance.now();

    setMetrics({
      loadTime,
      renderTime,
      firstContentfulPaint: fcp?.startTime || 0,
    });

    // Log to console in development
    if (process.env.NODE_ENV === "development") {
      console.log("Performance Metrics:", {
        loadTime: `${loadTime}ms`,
        renderTime: `${renderTime.toFixed(2)}ms`,
        fcp: fcp ? `${fcp.startTime.toFixed(2)}ms` : "N/A",
      });
    }
  }, []);

  return metrics;
}






