---
import Icon from '../Icon.astro'

interface Props {
  icon?: string
  class?: string
  prepend?: boolean
  type?: string
  name?: string
  value?: string
  rounded?: boolean
  ariaLabel?: string
  readonly?: boolean
  placeholder?: string
  loader?: boolean
  autocomplete?: string
}

const { icon = 'search', class: className, prepend, type = 'text', name, value = '', rounded, ariaLabel, readonly, placeholder = 'Search…', loader, autocomplete } = Astro.props

const wrapperClass = ['input-icon', className]
const addonClass = ['input-icon-addon']
const controlClass = ['form-control', rounded && 'form-control-rounded']
---

<div class:list={wrapperClass}>
  {prepend && <span class:list={addonClass}>{loader ? <span class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
  <input type={type as astroHTML.JSX.HTMLInputTypeAttribute} name={name} value={value} class:list={controlClass} placeholder={placeholder} aria-label={ariaLabel} readonly={readonly} autocomplete={autocomplete} />
  {!prepend && <span class:list={addonClass}>{loader ? <span class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
</div>