import React, { forwardRef } from "react";
import { QrCode as QrCodePrimitives } from "@ark-ui/react";

const QrCode = forwardRef<
  React.ElementRef<typeof QrCodePrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof QrCodePrimitives.Root>
>(({ children, ...props }, ref) => {
  return (
    <QrCodePrimitives.Root ref={ref} className="fill-base-900" {...props}>
      <QrCodePrimitives.Frame>
        <QrCodePrimitives.Pattern />
      </QrCodePrimitives.Frame>
      {children}
    </QrCodePrimitives.Root>
  );
});

QrCode.displayName = "QrCode";

const QrCodeOverlay = forwardRef<
  React.ElementRef<typeof QrCodePrimitives.Overlay>,
  React.ComponentPropsWithoutRef<typeof QrCodePrimitives.Overlay>
>((props, ref) => {
  return (
    <QrCodePrimitives.Overlay
      ref={ref}
      {...props}
      className="w-10 rounded-full border-4 border-white"
    />
  );
});

QrCodeOverlay.displayName = "QrCodeOverlay";

export { QrCode, QrCodeOverlay };

import { QrCode, QrCodeOverlay } from "../core/qr-code";

export const QrCodeExample = () => {
  return (
    <div className="w-32">
      <QrCode value="http://ark-ui.com">
        <QrCodeOverlay>
          <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
        </QrCodeOverlay>
      </QrCode>
    </div>
  );
};