'use client';

import s from './styles.module.scss';

import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
import { clsx } from 'clsx';

type InputProps = {
  wrapperClassName?: string;
  className?: string;
  fullWidth?: boolean;
  variant?: 'default' | 'ghost';
  error?: string | boolean;
  errorTextColor?: string;
} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

const Input = forwardRef(function Input(
  {
    className,
    fullWidth = false,
    variant = 'default',
    error = false,
    errorTextColor,
    ...props
  }: InputProps,
  ref: Ref<HTMLInputElement>,
) {
  return (
    <div className={s.Container}>
      <input
        {...props}
        ref={ref}
        className={clsx(
          s.Input,
          s['Input_' + variant],
          fullWidth && s.Input_fullWidth,
          error && s.Input_error,
          className,
        )}
      />
      {error && (
        <span className={s.Error} style={{ color: errorTextColor }}>
          {error}
        </span>
      )}
    </div>
  );
});

export { Input };
