import { useNavigate } from "react-router-dom";
import StyledButton from "../../../common/component/styled/Button";
import PlayIcon from "../../../assets/icons/play.svg?url";
import { Trans, useTranslation } from "react-i18next";


export default function DonePage({ serverName }: { serverName: string }) {
  const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
  const navigate = useNavigate();

  return (
    <div className="h-full flex-center flex-col text-center w-[588px] m-auto">
      <span className="text-2xl font-bold mb-2">{t("done_welcome", { serverName })}</span>
      <span className="text-sm mb-12">{t("done_title")}</span>
      <span className="text-xl mb-12">
        <Trans i18nKey={"onboarding.done_desc"} ns={"welcome"}>
          <span className="font-bold" />
        </Trans>
      </span>
      <StyledButton className="!w-32 flex flex-col items-center py-3" onClick={() => navigate("/")}>
        <img className="mb-2" src={PlayIcon} alt="play icon" />
        <span className="text-sm">{t("enter")}</span>
      </StyledButton>
    </div>
  );
}
