"use client";

import { Button } from "@/components/ui/button";
import { useLocaleDirection } from "@/hooks/useLocale";
import { CheckSquare } from "lucide-react";
import { useTranslations } from "next-intl";

export default function TermsAndConditionsSection() {
  const t = useTranslations("termsandconditions");
  const { locale } = useLocaleDirection();
  return (
    <div className="space-y-10">
      <div className="p-4 md:p-10 bg-bg md:rounded-[24px] rounded-[16px] space-y-5">
        <div className="flex gap-1 flex-col">
          <h3 className="text-text text-[24px] font-bold">{t("title")}</h3>
          <p className="text-text text-[12px]">
            {t("date")}{" "}
            <span className="font-medium">24 فبراير 2025 - 11:00 ص</span>
          </p>
        </div>
        <div className="space-y-6">
          <p>{t("text")}</p>
          <p>{t("text")}</p>
          <p>{t("text")}</p>
        </div>
      </div>

      <div className="flex justify-end gap-4 sm:gap-6">
        <Button variant="outline" as="link" href={`/${locale ?? ""}/`}>
          {t("close")}
        </Button>

        <Button as="link" href={`/${locale ?? ""}/subscribe`}>
          {t("agree")}
          <CheckSquare className="w-[18px] h-[18px]" />
        </Button>
      </div>
    </div>
  );
}