import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { cx } from '../utils';

type TextFieldProps = ComponentPropsWithoutRef<'input'>;
type TextAreaProps = ComponentPropsWithoutRef<'textarea'>;

export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
  ({ className, ...props }, ref) => (
    <input ref={ref} className={cx('mta-field', className)} {...props} />
  ),
);
TextField.displayName = 'TextField';

export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
  ({ className, ...props }, ref) => (
    <textarea ref={ref} className={cx('mta-field', className)} {...props} />
  ),
);
TextArea.displayName = 'TextArea';

export const SearchField = ({
  icon,
  ...props
}: TextFieldProps & { icon: ReactNode }) => (
  <div className="mta-search">
    <span className="ph">{icon}</span>
    <TextField {...props} />
  </div>
);
