import React from "react";
import { IonCard, IonCardContent, IonText } from "@ionic/react";
import { QRCodeCanvas } from "qrcode.react";

interface QRcodeProps {
 text: string;
}

const QRcode: React.FC<QRcodeProps> = ({ text }) => {
 return (
  <IonCard className="ion-text-center ion-padding">
   <IonCardContent>
    <QRCodeCanvas
     id="qrcode"
     value={text || ""}
     size={200}
     marginSize={2} // ✅ replaces deprecated includeMargin
    />
    <IonText color="medium">
     <p className="ion-margin-top">Scan the QR Code</p>
    </IonText>
   </IonCardContent>
  </IonCard>
 );
};

export default QRcode;