import { Info, X } from "lucide-react";

interface SessionExpiryWarningProps {
  minutesRemaining: number;
  onExtend?: () => void;
  onDismiss?: () => void;
}

export function SessionExpiryWarning({
  minutesRemaining,
  onExtend,
  onDismiss,
}: SessionExpiryWarningProps): React.ReactElement {
  return (
    <div
      role="status"
      aria-live="polite"
      className="fixed bottom-4 right-4 z-50 flex max-w-sm items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4 shadow-lg"
    >
      <Info className="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-500" aria-hidden="true" />
      <div className="flex-1">
        <p className="text-sm text-blue-700">
          Your session will end in {minutesRemaining}{" "}
          {minutesRemaining === 1 ? "minute" : "minutes"}. Consider saving your work.
        </p>
        <div className="mt-2 flex gap-2">
          {onExtend ? (
            <button
              type="button"
              onClick={onExtend}
              className="rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
            >
              Extend Session
            </button>
          ) : null}
        </div>
      </div>
      {onDismiss ? (
        <button
          type="button"
          onClick={onDismiss}
          aria-label="Dismiss"
          className="flex-shrink-0 text-blue-400 hover:text-blue-600 focus:outline-none"
        >
          <X className="h-4 w-4" aria-hidden="true" />
        </button>
      ) : null}
    </div>
  );
}
