"use client";

import { Clock } from "lucide-react";

export function formatTimeRemaining(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, "0")}`;
}

export function OtpExpiryDisplay({
  timeRemaining,
  isExpired,
}: {
  timeRemaining: number | null;
  isExpired: boolean;
}) {
  if (isExpired) {
    return (
      <p className="text-sm text-danger text-center" role="alert">
        Code expired. Please request a new one.
      </p>
    );
  }
  if (timeRemaining !== null) {
    return (
      <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
        <Clock className="w-4 h-4" />
        <span>Code expires in {formatTimeRemaining(timeRemaining)}</span>
      </div>
    );
  }
  return null;
}
