import { createSignal, onCleanup } from "solid-js";
import { generateTOTP } from "../../crypto/totp";

interface TOTPProps {
  secret: string;
}

export function TOTPDisplay(props: TOTPProps) {
  const [totp, setTotp] = createSignal(generateTOTP(props.secret));

  const interval = setInterval(() => {
    setTotp(generateTOTP(props.secret));
  }, 1000);

  onCleanup(() => clearInterval(interval));

  return (
    <div class="peach-totp-band">
      <div>
        <span class="peach-label">2-factor</span>
        <p class="peach-totp-code">
          <span class="peach-totp-code-text">
            {totp().code.slice(0, 3)} {totp().code.slice(3)}
          </span>
        </p>
      </div>
      <div class="peach-totp-meta">
        <span class="peach-label">expires</span>
        <div class="peach-totp-countdown">{totp().remaining}s</div>
      </div>
    </div>
  );
}