import { useState, InputHTMLAttributes } from 'react'
import styles from './Input.module.css'

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label: string
  error?: string
  showPasswordToggle?: boolean
}

export default function Input({
  label,
  error,
  type = 'text',
  showPasswordToggle = false,
  ...props
}: InputProps) {
  const [showPassword, setShowPassword] = useState(false)

  const inputType = showPasswordToggle
    ? (showPassword ? 'text' : 'password')
    : type

  return (
    <div className={`${styles.inputContainer} ${error ? styles.hasError : ''}`}>
      <div className={styles.label}>
        <span className={styles.labelText}>{label}</span>
      </div>
      <div className={styles.inputWrapper}>
        <input
          type={inputType}
          className={styles.input}
          {...props}
        />
        {showPasswordToggle && (
          <button
            type="button"
            className={styles.toggleButton}
            onClick={() => setShowPassword(!showPassword)}
            tabIndex={-1}
          >
            <EyeIcon />
          </button>
        )}
      </div>
      {error && <span className={styles.errorText}>{error}</span>}
    </div>
  )
}

function EyeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z"
        stroke="#D1D9FF"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle
        cx="12"
        cy="12"
        r="3"
        stroke="#D1D9FF"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}
