import { cn } from "@/lib/utils";
import { SaudiRiyal } from "lucide-react";
import { useTranslations } from "next-intl";
export default function SubscribeSummary() {
  const t = useTranslations("subscribe.response");
  const tMonth = useTranslations("subscribe.forms");
  const currency = <SaudiRiyal className="h-6 h-6 inline" />;
  return (
    <div className="p-4 md:p-10 [background:var(--color-radial-gradient-white)] [box-shadow:var(--shadow-pricing-card)] rounded-[16px] space-y-5">
      <h3 className="text-text text-[24px] font-bold">{t("title")}</h3>
      <div
        className={cn(
          "space-y-6",
          "[&>div]:flex [&>div]:flex-col sm:[&>div]:flex-row [&>div]:items-start sm:[&>div]:items-center gap-4 [&>div]:md:gap-10 [&>div]:text-text",
          "[&>div>span]:w-[162px] [&>div>span]:font-medium [&>div>span]:text-[18px]",
          "[&>div>strong]:font-bold [&>div>strong]:text-[20px]"
        )}
      >
        <div>
          <span>{t("username")}</span>
          <strong>Ahmed Ali</strong>
        </div>
        <div>
          <span>{t("sendInvoiceTo")}</span>
          <strong dir="auto">example@gmail.com</strong>
        </div>
        <div>
          <span>{t("cardNumber")}</span>
          <strong dir="auto">**** **** **** 6125</strong>
        </div>
        <div>
          <span>{t("packagesName")}</span>
          <strong>Standard Plan</strong>
        </div>
        <div>
          <span>{t("total")}</span>
          <strong>
            <span className="text-[32px]">500{currency}/</span>
            {tMonth("month")}
          </strong>
        </div>
      </div>
    </div>
  );
}