import React from 'react';
import clsx, { ClassValue } from 'clsx';
import { Typography } from '../Typography/Typography';
import stylesTypography from '../Typography/Typography.module.scss';
import styles from './Input.module.scss';
interface IInputProps extends React.ComponentPropsWithRef<'input'> {
caption?: string;
errorText?: string;
icon?: React.ReactNode;
wrapClassName?: ClassValue;
labelClassName?: ClassValue;
prefix?: 'от' | 'до' | undefined;
}
export const Input = React.forwardRef<HTMLInputElement, IInputProps>(
(
{
caption,
errorText,
placeholder = 'Введите текст',
wrapClassName,
labelClassName,
className,
icon,
prefix,
size = '100%',
...props
},
ref,
) => {
return (
<div
className={clsx(wrapClassName)}
style={{ width: size, padding: prefix ? '16px 12px 16px 41px' : '16px 12px 16px 16px' }}
>
<label className={clsx(labelClassName)}>
{caption && (
<Typography textStyle='textS' className={styles.Input_label}>
{caption}
</Typography>
)}
<div className={clsx(styles.Input_wrapper)}>
{prefix && <div className={styles.Input_prefix}>{prefix}</div>}
<input
{...props}
ref={ref}
placeholder={placeholder}
className={clsx(
stylesTypography.Typography_Style_TextM,
styles.Input,
prefix && styles.Input_prefixed,
errorText && styles.Input_invalid,
className,
)}
/>
{icon && <div className={styles.Input_icon}>{icon}</div>}
</div>
</label>
{errorText && (
<Typography textStyle='menuItem' className={styles.Input_error}>
{errorText}
</Typography>
)}
</div>
);
},
);
Input.displayName = 'Input';