"use client"

import { useEffect, useRef } from "react"
import QRCode from "qrcode"

interface Props {
  url: string
  size?: number
  className?: string
}

export function QRCodeCanvas({ url, size = 180, className }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    if (!canvasRef.current) return
    QRCode.toCanvas(canvasRef.current, url, {
      width: size,
      margin: 2,
      color: { dark: "#1e40af", light: "#ffffff" },
      errorCorrectionLevel: "M",
    }).catch(() => {})
  }, [url, size])

  return (
    <canvas
      ref={canvasRef}
      className={className}
      style={{ width: size, height: size }}
    />
  )
}
