"use client";
import { useTranslations } from "next-intl";
import { ArrowLeft, ArrowRight, MailOpen } from "lucide-react";
import { Button } from "@/components/ui/button";
import InviteDetails from "./InviteDetails";
import type { InvitePayload } from "@/lib/invite";

interface WelcomeStepProps {
  invite: InvitePayload;
  isRTL: boolean;
  dashboardUrl: string;
  onAccept: () => void;
}

export default function WelcomeStep({
  invite,
  isRTL,
  dashboardUrl,
  onAccept,
}: WelcomeStepProps) {
  const t = useTranslations("InvitePage");
  const Arrow = isRTL ? ArrowLeft : ArrowRight;

  return (
    <div className="flex flex-col gap-6 sm:gap-8">
      <div className="flex flex-col items-center text-center gap-4">
        <div className="relative">
          <span className="absolute inset-0 -m-3 rounded-full bg-secondary-main/20 blur-xl" />
          <span className="relative flex size-20 sm:size-24 items-center justify-center rounded-full bg-linear-to-br from-secondary-main to-secondary-dark text-primary-main shadow-[0_12px_40px_-12px_rgba(207,220,51,0.7)] ring-8 ring-secondary-main/10">
            <MailOpen className="size-9 sm:size-11" strokeWidth={1.75} />
          </span>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-[13px] sm:text-[14px] font-medium text-secondary-main">
            {t("youAreInvited")}
          </span>
          <h1 className="text-[24px] sm:text-[32px] font-bold leading-tight">
            {t("welcomeTitle")}
          </h1>
          <p className="text-[14px] sm:text-[18px] text-white/75 max-w-[420px]">
            {t.rich("welcomeDescription", {
              company: invite.cn,
              strong: (chunks) => (
                <strong className="font-bold text-white">{chunks}</strong>
              ),
            })}
          </p>
        </div>
      </div>

      <InviteDetails invite={invite} />

      <div className="flex flex-col gap-3">
        <Button onClick={onAccept} className="w-full font-bold">
          {t("acceptInvitation")}
          <Arrow className="size-5" />
        </Button>
        <p className="text-center text-[13px] sm:text-[14px] text-white/60">
          {t("alreadyHaveAccount")}{" "}
          <a
            href={dashboardUrl}
            className="font-bold text-secondary-main underline-offset-4 hover:underline"
          >
            {t("signIn")}
          </a>
        </p>
      </div>
    </div>
  );
}