import React from 'react'
import styles from './ModalInput.module.css'

interface Props {
  label: string
  value: string
  onChange: (value: string) => void
  placeholder?: string
  maxLength?: number
  showCounter?: boolean
  required?: boolean
  className?: string
}

const ModalInput: React.FC<Props> = ({
  label,
  value,
  onChange,
  placeholder,
  maxLength,
  showCounter = false,
  required = false,
  className = ''
}) => {
  return (
    <div className={`${styles.container} ${className}`}>
      <label className={styles.label}>{label}</label>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        maxLength={maxLength}
        required={required}
        className={styles.input}
      />
      {showCounter && maxLength && (
        <div className={styles.counter}>
          {value.length}/{maxLength}
        </div>
      )}
    </div>
  )
}

export default ModalInput