"use client";

import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import Image, { type StaticImageData } from "next/image";
import qrImage from "@/app/assets/Image/qrImage.svg";

type QRScanProps = {
  src?: StaticImageData | string;
  className?: string;
  lineClassName?: string;
};

export default function QRScan({ src = qrImage, className, lineClassName }: QRScanProps) {
  return (
    <div className={cn("relative size-[56px] md:size-[120px] xl::size-[120px] overflow-hidden bg-white", className)}>

      {/* QR */}
      <Image
        src={src}
        alt="QR Code"
        fill
        sizes="(min-width: 1280px) 120px, (min-width: 768px) 120px, 56px"
        className="object-contain "
      />

      {/* Scanner Line */}
      <motion.div
        className={cn("absolute left-0 right-0 top-3 z-10 h-[4px] rounded-full bg-[#39B574] shadow-[0px_0px_11.71px_2.93px_#39B574B2]", lineClassName)}
        animate={{
          top: ["5%", "93%", "5%"],
        }}
        transition={{
          duration: 3,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />
    </div>
  );
}