"use client";

import type { Lang } from "@/lib/config";
import { CheckCircle2 } from "lucide-react";

const t = {
  en: {
    title: "Payment Successful",
    message: "Thank you! Your quotation payment has been received.",
    detail: "You will receive a confirmation email shortly.",
    close: "You can close this page",
  },
  ar: {
    title: "تم الدفع بنجاح",
    message: "شكراً لك! تم استلام دفعة عرض السعر.",
    detail: "ستتلقى بريد تأكيد قريباً.",
    close: "يمكنك إغلاق هذه الصفحة",
  },
};

export default function QuotationPaymentSuccess({ lang }: { lang: Lang }) {
  const isAr = lang === "ar";
  const labels = isAr ? t.ar : t.en;

  return (
    <div
      dir={isAr ? "rtl" : "ltr"}
      className="min-h-[60vh] flex items-center justify-center p-6"
    >
      <div className="max-w-md w-full text-center space-y-6">
        <div className="mx-auto w-fit rounded-full bg-green-100 p-4">
          <CheckCircle2 className="w-12 h-12 text-green-600" />
        </div>
        <h1 className="text-2xl font-bold text-gray-900">{labels.title}</h1>
        <p className="text-gray-600">{labels.message}</p>
        <p className="text-sm text-gray-400">{labels.detail}</p>
        <p className="text-xs text-gray-400 pt-4">{labels.close}</p>
      </div>
    </div>
  );
}