import React from 'react';

type InputProps = {
  value: string;
  onChange: (v: string) => void;
  label?: string;
  placeholder?: string;
  type?: 'text' | 'password' | 'email';
  className?: string;
  autoFocus?: boolean;
  multiline?: boolean;
  rows?: number;
};

const Input = ({
  value,
  onChange,
  label,
  placeholder,
  type = 'text',
  className = '',
  autoFocus,
  multiline,
  rows = 3,
}: InputProps) => {
  // 16px on mobile prevents iOS zoom-on-focus; 15px on >= md keeps original look
  const baseClass = `
    w-full bg-[var(--tg-bg-secondary)] border-2 border-transparent
    rounded-xl px-3.5 py-2.5 text-[16px] md:text-[15px]
    text-[var(--tg-text-primary)]
    placeholder:text-[var(--tg-text-secondary)]
    outline-none focus:border-[var(--tg-accent)]
    transition-colors duration-150
  `;

  return (
    <label className={`block ${className}`}>
      {label && (
        <span className="block text-[13px] font-medium text-[var(--tg-text-secondary)] mb-1.5 px-0.5">
          {label}
        </span>
      )}
      {multiline ? (
        <textarea
          rows={rows}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          autoFocus={autoFocus}
          className={`${baseClass} resize-none`}
        />
      ) : (
        <input
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          autoFocus={autoFocus}
          className={baseClass}
        />
      )}
    </label>
  );
};

export default Input;
