import React from 'react'
import { TextInputProps } from '@/app/types'
import Tooltip from './Tooltip'

const TextInput = ({
  value,
  handleChange,
  label,
  placeholder,
  name,
  type = 'text',
  className = '',
  maxLength,
  tooltip,
}: TextInputProps) => {
  return (
    <div className={className}>
      {label && (
        <div className="flex items-center gap-2 my-2">
          <label className="font-medium text-sm text-gray-500" htmlFor={name}>
            {label}
          </label>
          {tooltip && <Tooltip content={tooltip} />}
        </div>
      )}
      <input
        type={type}
        id={name}
        name={name}
        placeholder={placeholder}
        value={value || ''}
        onChange={handleChange}
        className="w-full p-4 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-2 focus:ring-mainblocks focus:bg-white"
        autoComplete={name}
        maxLength={maxLength}
      />
    </div>
  )
}

export default TextInput