import clsx from 'clsx';

interface TextInputContainerProps {
  children: React.ReactNode;
  isError: boolean;
  disabled?: boolean;
  isActiveWithoutError: boolean;
  labelClassStr?: string;
}

export const TextInputContainer = ({
  children,
  isError,
  disabled,
  isActiveWithoutError,
  labelClassStr,
}: TextInputContainerProps) => {
  const containerClassNames = clsx(`relative border-b h-9 block border-[#000]/[.56]`, {
    [labelClassStr as string]: labelClassStr,
    'border-gray-300': disabled,
    'border-[#ff0000]': isError,
    'border-[#2196f3]': isActiveWithoutError,
  });

  return <div className={containerClassNames}>{children}</div>;
};
