import {
  characterRemainingAnnouncement,
  characterRemainingLabel,
  characterRemainingVisible,
} from "@/lib/character-remaining";

export function CharacterRemaining({
  id,
  length,
  maxLength,
}: {
  id: string;
  length: number;
  maxLength: number;
}) {
  if (!characterRemainingVisible(length, maxLength)) return null;
  const remaining = maxLength - length;
  const atLimit = remaining <= 0;
  return (
    <span
      id={id}
      className="character-remaining"
      data-limit={atLimit ? "true" : undefined}
      aria-live="polite"
      aria-atomic="true"
    >
      <span aria-hidden="true">{characterRemainingLabel(remaining, maxLength)}</span>
      <span className="sr-only">{characterRemainingAnnouncement(remaining, maxLength)}</span>
    </span>
  );
}