"use client" import { useRef, useCallback, useState } from "react" import { MemberCardData } from "@/templates/membership-card/types" import { CardFront } from "./card-front" import { CardBack } from "./card-back" interface Props { member: MemberCardData showDownload?: boolean showFlip?: boolean size?: "sm" | "md" | "lg" showBoth?: boolean } export function MembershipCardEngine({ member, showDownload = false, showFlip = true, size = "md", showBoth = false, }: Props) { const cardRef = useRef(null) const [flipped, setFlipped] = useState(false) const [isExporting, setIsExporting] = useState(false) const handleDownload = useCallback(async () => { if (typeof window === "undefined") return setIsExporting(true) try { const html2canvas = (await import("html2canvas")).default const card = cardRef.current if (!card) return // Temporarily show both sides for full card render const wasFlipped = flipped if (wasFlipped) setFlipped(false) await new Promise((r) => setTimeout(r, 100)) const canvas = await html2canvas(card, { scale: 4, useCORS: true, allowTaint: false, backgroundColor: "#ffffff", logging: false, width: card.scrollWidth, height: card.scrollHeight, }) const link = document.createElement("a") link.download = `membership-card-${member.membershipNumber}.png` link.href = canvas.toDataURL("image/png") link.click() } catch (err) { console.error("Download failed:", err) } finally { setIsExporting(false) } }, [flipped, member.membershipNumber]) const handlePrint = useCallback(() => { const printWindow = window.open("", "_blank") if (!printWindow) return const cardEl = cardRef.current if (!cardEl) return printWindow.document.write(` بطاقة العضوية - ${member.nameAr} ${cardEl.innerHTML} `) printWindow.document.close() }, [member]) const scaleMap = { sm: 0.4, md: 0.55, lg: 0.75 } const scale = scaleMap[size] return (
{(!flipped || showBoth) && } {(flipped || showBoth) && }
{showFlip && !showBoth && ( )} {showDownload && ( <> )}
) }