"use client";
import { RootState } from "@/store/store";
import { useSelector } from "react-redux";
import { useTranslations } from "next-intl";

type Props = {};

export default function CheckoutCard({}: Props) {
  const t = useTranslations();
  const { subTotal, items } = useSelector(
    (state: RootState) => state.CartConfig,
  );

  return (
    <div className="relative bg-gradient-to-br from-primary-light to-white overflow-hidden lg:pt-20 pt-36">
      <div className="container py-8 md:py-12">
        <div className="text-center max-w-3xl mx-auto">
          <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full mb-4 shadow-sm">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="lucide lucide-sparkles *:stroke-primary"
            >
              <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
              <path d="M20 3v4"></path>
              <path d="M22 5h-4"></path>
              <path d="M4 17v2"></path>
              <path d="M5 18H3"></path>
            </svg>
            <span className="text-sm">{t("Text.paymentSecure")}</span>
          </div>
          <h1 className="text-3xl md:text-4xl mb-4 text-primary">
            {t("Text.orderSummaryTitle")}
          </h1>
          <p className="text-base md:text-lg text-text-secondary leading-relaxed">
            {t("Text.checkoutCardText", {
              itemsCount: items?.length,
              price: subTotal ? subTotal : "5000",
            })}
          </p>
        </div>
      </div>
    </div>
  );
}