import React from 'react'
import { TextInputProps } from '@/app/types'
import Tooltip from './Tooltip'
import { HiOutlineEye, HiOutlineEyeOff } from 'react-icons/hi'

const TextInput = ({
  value,
  handleChange,
  label,
  placeholder,
  name,
  type = 'text',
  className = '',
  maxLength,
  tooltip,
  style,
  isPassword,
  togglePasswordVisibility,
  isVisible,
}: TextInputProps) => {
  const getStylesProps = () => {
    const baseStyles = 'px-3 py-2 '
    switch (style) {
      case 'main':
        return `p-4`
      case 'register':
        return `${baseStyles}`
      default:
        return baseStyles
    }
  }

  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>
      )}
      <div className="relative">
        <input
          type={isPassword ? (isVisible ? 'text' : 'password') : type}
          id={name}
          name={name}
          placeholder={placeholder}
          value={value || ''}
          onChange={handleChange}
          className={`${getStylesProps()} w-full border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-1 focus:ring-blue-400 focus:bg-white`}
          autoComplete={name}
          maxLength={maxLength}
        />
        {isPassword && (
          <button
            type="button"
            onClick={togglePasswordVisibility}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
          >
            {isVisible ? <HiOutlineEye /> : <HiOutlineEyeOff />}
          </button>
        )}
      </div>
    </div>
  )
}

export default TextInput