"use client"

import { useParams } from "next/navigation"
import { MemberCardData } from "@/templates/membership-card/types"
import config from "@/templates/membership-card/config.json"

const cardConfig = config as any

export function CardBack({ member }: { member: MemberCardData }) {
  const params = useParams()
  const lang = (params?.lang as string) || "ar"
  const isRtl = lang === "ar"
  const el = cardConfig.back.elements

  const s = (name: string): React.CSSProperties => {
    const e = el[name]
    if (!e) return {}
    const style: React.CSSProperties = {
      position: "absolute",
      left: `${e.x}%`,
      top: `${e.y}%`,
    }
    if (e.width) style.width = typeof e.width === "number" ? `${e.width}%` : e.width
    if (e.height) style.height = typeof e.height === "number" ? `${e.height}%` : e.height
    if (e.fontSize) style.fontSize = e.fontSize
    if (e.fontWeight) style.fontWeight = e.fontWeight
    if (e.color) style.color = e.color
    if (e.textAlign) style.textAlign = e.textAlign as any
    if (e.fontFamily) style.fontFamily = e.fontFamily
    if (e.lineHeight) style.lineHeight = e.lineHeight
    return style
  }

  const cardW = cardConfig.card.widthMm
  const cardH = cardConfig.card.heightMm

  return (
    <div
      className="card-face card-back"
      style={{
        position: "relative",
        width: `${cardW}mm`,
        height: `${cardH}mm`,
        overflow: "hidden",
        borderRadius: 4,
        backgroundImage: `url(${cardConfig.back.background})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        flexShrink: 0,
        direction: isRtl ? "rtl" : "ltr",
      }}
    >
      <span style={s("expiryDate")}>{member.expiryDate || "20/05/2028"}</span>
      <div style={s("contactInfo")}>
        {member.email && <div>Email: {member.email}</div>}
        {member.phone && <div>Tel: {member.phone}</div>}
      </div>
    </div>
  )
}