import React from 'react';

import { useNumberFormat } from '../utils/hooks/use-number-format';
import { Text } from '../text';

export interface TextareaFieldCounterProps {
  valueLength: number;
  maxLength: number;
  className?: string;
}

export const TextareaFieldCounter = ({
  valueLength,
  maxLength,
  className,
}: TextareaFieldCounterProps) => {
  const formatLength = useNumberFormat();

  const isLimitReached = valueLength >= maxLength;

  return (
    <Text
      variant="inherit"
      color={isLimitReached ? 'error' : 'secondary'}
      weight={isLimitReached ? 'bold' : 'normal'}
      className={className}
    >
      {formatLength(valueLength)}/{formatLength(maxLength)}
    </Text>
  );
};