"use client" import { useLanguageContext } from "@/components/language-selector" import { Button } from "@/styles/base-nova/ui-rtl/button" import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox" import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, } from "@/styles/base-nova/ui-rtl/field" import { Input } from "@/styles/base-nova/ui-rtl/input" import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@/styles/base-nova/ui-rtl/select" import { Textarea } from "@/styles/base-nova/ui-rtl/textarea" const translations = { ar: { dir: "rtl" as const, locale: "ar-SA", paymentMethod: "طريقة الدفع", secureEncrypted: "جميع المعاملات آمنة ومشفرة", nameOnCard: "الاسم على البطاقة", namePlaceholder: "أحمد محمد", cardNumber: "رقم البطاقة", cardDescription: "أدخل رقمك المكون من 16 رقمًا.", cvv: "رمز الأمان", month: "الشهر", year: "السنة", billingAddress: "عنوان الفواتير", billingDescription: "عنوان الفواتير المرتبط بطريقة الدفع الخاصة بك", sameAsShipping: "نفس عنوان الشحن", comments: "تعليقات", commentsPlaceholder: "أضف أي تعليقات إضافية", submit: "إرسال", cancel: "إلغاء", }, he: { dir: "rtl" as const, locale: "he-IL", paymentMethod: "אמצעי תשלום", secureEncrypted: "כל העסקאות מאובטחות ומוצפנות", nameOnCard: "שם על הכרטיס", namePlaceholder: "ישראל ישראלי", cardNumber: "מספר כרטיס", cardDescription: "הזן את המספר בן 16 הספרות שלך.", cvv: "קוד אבטחה", month: "חודש", year: "שנה", billingAddress: "כתובת לחיוב", billingDescription: "כתובת החיוב המשויכת לאמצעי התשלום שלך", sameAsShipping: "זהה לכתובת המשלוח", comments: "הערות", commentsPlaceholder: "הוסף הערות נוספות", submit: "שלח", cancel: "ביטול", }, } function formatCardNumber(locale: string) { const formatter = new Intl.NumberFormat(locale, { useGrouping: false }) return `${formatter.format(1234)} ${formatter.format(5678)} ${formatter.format(9012)} ${formatter.format(3456)}` } function formatCvv(locale: string) { return new Intl.NumberFormat(locale, { useGrouping: false }).format(123) } function getMonths(locale: string) { const formatter = new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false, }) return Array.from({ length: 12 }, (_, i) => { const value = String(i + 1).padStart(2, "0") return { label: formatter.format(i + 1), value } }) } function getYears(locale: string) { const formatter = new Intl.NumberFormat(locale, { useGrouping: false }) return Array.from({ length: 6 }, (_, i) => { const year = 2024 + i return { label: formatter.format(year), value: String(year) } }) } export function FieldDemo() { const context = useLanguageContext() const lang = context?.language === "he" ? "he" : "ar" const t = translations[lang] const months = getMonths(t.locale) const years = getYears(t.locale) const cardPlaceholder = formatCardNumber(t.locale) const cvvPlaceholder = formatCvv(t.locale) return (

{t.paymentMethod} {t.secureEncrypted} {t.nameOnCard}

{t.cardNumber} {t.cardDescription} {t.cvv}

{t.month} {t.year}

{t.billingAddress} {t.billingDescription} {t.sameAsShipping}

{t.comments}