import { twJoin } from "tailwind-merge";
import React from "react";

import { dotStyles } from "./dotStyles";

export interface InputCounterProps {
  value: string | undefined;
  maxLength: number;
}

export const InputCounter = ({ value, maxLength }: InputCounterProps) => {
  const count = maxLength - (value?.length ?? 0);

  return (
    <div
      className={twJoin(
        dotStyles,
        "text-style-M700 -bottom-[7.5px] text-[9px]",
        count < 0 ? "text-R300" : "text-N700"
      )}
    >
      {count}
    </div>
  );
};
