"use client"

import { useDesign } from "@/contexts/design-context"
import { useEffect } from "react"

export function FontDebugger() {
  const { font } = useDesign()

  useEffect(() => {
    console.log("Current font in FontDebugger:", font)
  }, [font])

  return (
    <div className="fixed bottom-4 right-4 bg-black/80 text-white p-2 rounded text-xs z-50">
      <div>Current Font: {font}</div>
      <div className="mt-1" style={{ fontFamily: font }}>
        Sample Text
      </div>
    </div>
  )
}