import clsx from 'clsx';
import { ReactNode } from 'react';

interface TextLabelProps {
  label: ReactNode;
  textFieldId: string;
  isError: boolean;
  hasValue: boolean;
  isFocused: boolean;
  isActiveWithoutError: boolean;
}

export const TextLabel = ({
  label,
  textFieldId,
  isError,
  isFocused,
  hasValue,
  isActiveWithoutError,
}: TextLabelProps) => {
  const labelClassNames = clsx('absolute left-0 transition-all duration-200 h-9 leading-9', {
    'top-[-17px] text-[12px] leading-[12px]': isFocused || hasValue,
    'top-1/2 text-[16px] mt-[-18px] text-black/[.6] ': !isFocused && !hasValue,
    'text-[#ff0000] ': isError,
    'text-[#2196f3] ': isActiveWithoutError,
  });

  return (
    <label className={labelClassNames} htmlFor={textFieldId}>
      {label}
    </label>
  );
};
