import { extendVariants, Input, InputProps } from '@heroui/react';
interface ITextFieldsProps extends InputProps {}
const NextInput = extendVariants(Input, {
  defaultVariants: {
    variant: 'underlined'
  }
});

const TextField: React.FC<ITextFieldsProps> = ({ ...rest }) => {
  return (
    <NextInput
      {...rest}
      ref={(rest.ref as any) || null}
      classNames={{
        ...rest.classNames,
        inputWrapper: `
    border-b-1 border-primary-200 hover:border-primary-800
    dark:border-white dark:hover:border-white
    after:bottom-0 after:h-[1px] after:bg-primary-800 dark:after:bg-white
    ${rest.isInvalid ? 'after:!bg-danger !border-b-danger hover:!border-danger' : ''}
    ${rest.classNames?.helperWrapper}
  `,
        label: `
    text-lg text-primary-500 opacity-60 dark:text-white
    ${rest.classNames?.label}
  `,
        errorMessage: 'text-danger',
        input: `
    text-medium ${rest.classNames?.input}
  `
      }}
    />
  );
};

export default TextField;
