import { Checkbox } from "@/components/ui/checkbox";
import { useLocaleDirection } from "@/hooks/useLocale";
import { useTranslations } from "next-intl";
import Link from "next/link";
export default function PaymentConfirmStep() {
  const t = useTranslations("subscribe");
  const tForm = useTranslations("subscribe.forms");
  const { locale } = useLocaleDirection();
  return (
    <div className="space-y-5">
      <h3 className="text-text text-[24px] font-bold">{t("basicInfoTitle")}</h3>
      <label className="flex items-start gap-2 cursor-pointer text-sm text-black">
        <span className="flex items-start justify-center h-6 w-6">
          <Checkbox className="m-0 h-4 w-4 " />
        </span>
        <span className="text-sm text-black">
          {tForm.rich("termsAgreement", {
            link: (text) => (
              <Link
                href={`/${locale}/termsandconditions`}
                className="text-primary-main underline"
              >
                {text}
              </Link>
            ),
          })}
        </span>
      </label>
    </div>
  );
}