import React from 'react';

interface TmaInputProps {
  label?: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  type?: 'text' | 'number' | 'password';
  error?: string;
}

export default function TmaInput({ label, value, onChange, placeholder, type = 'text', error }: TmaInputProps) {
  return (
    <div className="flex flex-col gap-1.5 mb-4">
      {label && <label className="text-sm font-medium text-tg-textSecondary">{label}</label>}
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        className={`w-full px-4 py-3 rounded-lg border-2 border-tg-border focus:border-tg-secondary focus:outline-none transition-colors ${
          error ? 'border-red-500' : ''
        }`}
      />
      {error && <span className="text-xs text-red-500">{error}</span>}
    </div>
  );
}