import React from "react";
import { useTranslation, Trans } from "react-i18next";
import { SlideConfig } from "@app/types/types";
import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";

function WelcomeSlideTitle() {
  const { t } = useTranslation();

  return (
    <span className={styles.welcomeTitleContainer}>
      {t("onboarding.welcomeSlide.title", "Welcome to Stirling")}
      <span className={styles.v2Badge}>V2</span>
    </span>
  );
}

const WelcomeSlideBody = () => (
  <span>
    <Trans
      i18nKey="onboarding.welcomeSlide.body"
      components={{ strong: <strong /> }}
      defaults="Stirling PDF is now ready for teams of all sizes. This update includes a new layout, powerful new admin capabilities, and our most requested feature - <strong>Edit Text</strong>."
    />
  </span>
);

export default function WelcomeSlide(): SlideConfig {
  return {
    key: "welcome",
    title: <WelcomeSlideTitle />,
    body: <WelcomeSlideBody />,
    background: {
      gradientStops: ["#7C3AED", "#EC4899"],
      circles: UNIFIED_CIRCLE_CONFIG,
    },
  };
}
