import React from "react";
import { useTranslation } from "react-i18next";
import { SlideConfig } from "@app/types/types";
import { UNIFIED_LIGHT_BACKGROUND } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
import {
  DesktopInstallTitle,
  type OSOption,
} from "@app/components/onboarding/slides/DesktopInstallTitle";

export type { OSOption };

interface DesktopInstallSlideProps {
  osLabel: string;
  osUrl: string;
  osOptions?: OSOption[];
  onDownloadUrlChange?: (url: string) => void;
}

const DesktopInstallBody = () => {
  const { t } = useTranslation();

  return (
    <span>
      {t(
        "onboarding.desktopInstall.body",
        "Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.",
      )}
    </span>
  );
};

export default function DesktopInstallSlide({
  osLabel,
  osUrl,
  osOptions = [],
  onDownloadUrlChange,
}: DesktopInstallSlideProps): SlideConfig {
  return {
    key: "desktop-install",
    title: (
      <DesktopInstallTitle
        osLabel={osLabel}
        osUrl={osUrl}
        osOptions={osOptions || []}
        onDownloadUrlChange={onDownloadUrlChange}
      />
    ),
    body: <DesktopInstallBody />,
    downloadUrl: osUrl,
    background: UNIFIED_LIGHT_BACKGROUND,
  };
}
