"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";

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">
      <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 variant="outline" as="link" href={`/${locale ?? ""}/`}>
          {t("close")}
        </Button>

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