src/components/base/Input/index.tsx

'use client';

import { cn } from '@/utils/Helpers';
import { type FC, type InputHTMLAttributes, memo, type Ref } from 'react';

type InputProps = {
  className?: string;
  placeholder?: string;
  ref?: Ref<HTMLInputElement> ;
} & InputHTMLAttributes<HTMLInputElement> & Omit<InputHTMLAttributes<HTMLInputElement>, 'className'>;

const Input: FC<InputProps> = memo(({
  className = '',
  placeholder = '',
  ref,
  ...rest
}) => {
  const baseClassName = `flex h-9 w-full rounded-md border border-input 
  bg-background px-3 py-1 text-sm shadow-sm transition-colors 
  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 
  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 
  disabled:cursor-not-allowed disabled:opacity-50`;

  return (
    <input className={cn(baseClassName, className)} placeholder={placeholder} {...rest} ref={ref} />
  );
});

Input.displayName = 'Input';

export { Input };