'use client';
import React, { useEffect, useRef, useState } from 'react';
import QRCodeStyling, { Options } from 'qr-code-styling';

interface LiveThumbnailProps {
  options: Options;
}

export default function LiveThumbnail({ options }: LiveThumbnailProps) {
  const ref = useRef<HTMLDivElement>(null);
  
  // Clone options and override size for thumbnail
  const thumbOptions: Options = {
      ...options,
      width: 150,
      height: 150,
      margin: 5
  };

  const [qrCode] = useState<QRCodeStyling>(new QRCodeStyling(thumbOptions));

  useEffect(() => {
    if (ref.current) {
      qrCode.append(ref.current);
    }
  }, [qrCode, ref]);

  useEffect(() => {
    if (!qrCode) return;
    // ensure size remains thumbnail size
    qrCode.update({ ...options, width: 150, height: 150, margin: 5 });
  }, [qrCode, options]);

  return (
    <div className="flex justify-center items-center overflow-hidden">
      <div ref={ref} className="transform scale-90 origin-center" />
    </div>
  );
}
