<script setup lang="ts">
import { ref } from 'vue'

const icon = defineProp<string>()
const placeholder = defineProp<string>()

const modelValue = defineModel<string>({
  required: true
})

const input = ref()
</script>

<template>
	<div
    :class="{ 'has-icon': !!icon }"
    class="funkwhale input"
    @click="input.focus()"
  >
    <div v-if="icon" class="prefix">
      <i :class="['bi', icon]" />
    </div>
    <input
      v-bind="$attrs"
      v-model="modelValue"
      ref="input"
      :placeholder="placeholder"
      @click.stop
    />
    <div v-if="$slots['input-right']" class="input-right">
      <slot name="input-right" />
    </div>
  </div>
</template>

<style lang="scss">
@import './style.scss'
</style>
