<script setup>
import { Icon } from "@iconify/vue";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput
} from "../input-group";
const props = defineProps({
  modelValue: { type: String, required: false },
  placeholder: { type: String, required: false },
  browseUrl: { type: String, required: false }
});
const emit = defineEmits(["update:modelValue"]);
const DEFAULT_BROWSE_URL = "https://icones.js.org/collection/fluent?variant=Regular+20";
function onInput(value) {
  emit("update:modelValue", value == null ? "" : String(value));
}
</script>

<template>
  <InputGroup>
    <InputGroupAddon align="inline-start">
      <Icon
        :icon="props.modelValue || 'fluent:image-20-regular'"
        :class="props.modelValue ? 'text-zinc-600' : 'text-zinc-300'"
      />
    </InputGroupAddon>
    <InputGroupInput
      :model-value="props.modelValue ?? ''"
      :placeholder="props.placeholder ?? 'Iconify \u56FE\u6807\u6807\u8BC6\u7B26\uFF0C\u5982 fluent:add-20-regular'"
      class="font-mono text-xs"
      @update:model-value="onInput"
    />
    <InputGroupAddon align="inline-end">
      <InputGroupButton
        as="a"
        :href="props.browseUrl ?? DEFAULT_BROWSE_URL"
        target="_blank"
        rel="noopener noreferrer"
        size="icon-xs"
        aria-label="浏览图标"
      >
        <Icon icon="fluent:search-20-regular" />
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>
