import React, { useRef } from 'react'

import { QRCanvas } from '../../pages/style'
import { useQRCode } from '../../hooks/useQRCode'

interface QRCodeDisplayProps {
  url: string
  isFetching: boolean
  isSuccess: boolean
}

export const QRCodeDisplay: React.FC<QRCodeDisplayProps> = ({ 
  url, 
  isFetching, 
  isSuccess 
}) => {
  const canvRef = useRef(null)
  
  // Use the QR code hook
  useQRCode(canvRef, url, isFetching, isSuccess)
  
  return (
    <a href={url}>
      <QRCanvas ref={canvRef} />
    </a>
  )
} 