import { useMemo } from "react";
import { useTranslation } from "react-i18next";

import { genMnemonic } from "@/backend/accounts/crypto";
import { Button } from "@/components/buttons/Button";
import { PassphraseDisplay } from "@/components/form/PassphraseDisplay";
import { Icon, Icons } from "@/components/Icon";
import {
  LargeCard,
  LargeCardButtons,
  LargeCardText,
} from "@/components/layout/LargeCard";

interface PassphraseGeneratePartProps {
  onNext?: (mnemonic: string) => void;
}

export function PassphraseGeneratePart(props: PassphraseGeneratePartProps) {
  const mnemonic = useMemo(() => genMnemonic(), []);
  const { t } = useTranslation();

  return (
    <LargeCard>
      <LargeCardText
        title={t("auth.generate.title")}
        icon={<Icon icon={Icons.USER} />}
      >
        {t("auth.generate.description")}
      </LargeCardText>
      <PassphraseDisplay mnemonic={mnemonic} />

      <LargeCardButtons>
        <Button theme="purple" onClick={() => props.onNext?.(mnemonic)}>
          {t("auth.generate.next")}
        </Button>
      </LargeCardButtons>
    </LargeCard>
  );
}