<template>
  <button :type="type" class="input input-bordered w-full flex items-center justify-between text-left" v-bind="$attrs">
    <span :class="value ? 'text-base-content' : 'text-base-content/60'">
      {{ value || placeholder }}
    </span>
    <svg v-if="chevron" class="w-4 h-4 text-base-content/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>
</template>

<script setup lang="ts">
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  type: {
    type: String as () => 'button' | 'submit' | 'reset',
    default: 'button',
  },
  chevron: {
    type: Boolean,
    default: true,
  },
})
</script>
