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

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

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

export const SearchField = ({
  icon,
  ...props
}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
  <div className="modern-sk-search">
    <span className="ph">{icon}</span>
    <TextField {...props} />
  </div>
);