"use client";
import { useTranslations } from "next-intl";
import SubscribeSummary from "./SubscribeSummary";
import ResponseStatus from "./ResponseStatus";
import { Button } from "@/components/ui/button";
import { useLocaleDirection } from "@/hooks/useLocale";
import { ChevronLeft, ChevronRight, Repeat } from "lucide-react";
import Link from "next/link";

interface ResponsePageProps {
  status: string;
}

export default function ResponsePage({ status }: ResponsePageProps) {
  const t = useTranslations("subscribe.response");
  const { locale } = useLocaleDirection();
  const chevronIcon =
    locale === "ar" ? (
      <ChevronLeft className="w-4 h-4" />
    ) : (
      <ChevronRight className="w-4 h-4" />
    );
  return (
    <div className="space-y-6 w-full max-w-[1280px] mx-auto">
      <ResponseStatus
        status={status}
        title={status == "success" ? t("success") : t("failed")}
        text1={status == "success" ? t("successText") : t("failedText")}
        text2={status == "success" ? t("successDownload") : t("failedContact")}
      />

      <SubscribeSummary />

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

        {status == "success" ? (
          <Button asChild>
            <Link href={`/${locale ?? ""}/`}>
              {t("successAgree")}
              {chevronIcon}
            </Link>
          </Button>
        ) : (
          <Button asChild>
            <Link href={`/${locale ?? ""}/subscribe`}>
              {t("failedAgree")}
              <Repeat className="w-4 h-4" />
            </Link>
          </Button>
        )}
      </div>
    </div>
  );
}