'use client';

import { useMemo } from 'react';
import { renderBase } from 'fancy-qrcode';

import { cn } from '@/utils/cn';

interface FancyQRCodeProps {
  content: string;
  size?: number;
  className?: string;
}

export function FancyQRCode({
  content,
  size = 88,
  className,
}: FancyQRCodeProps) {
  const svgString = useMemo(
    () => renderBase({ content, size }),
    [content, size],
  );

  return (
    <div
      className={cn(className)}
      style={{ width: size, height: size }}
      dangerouslySetInnerHTML={{ __html: svgString }}
    />
  );
}