<template>
  <div class="field">
    <div v-if="label" class="field-header">
      <label>{{ label }}</label>
      <slot name="actions"></slot>
    </div>
    <div v-if="hint" class="field-hint">{{ hint }}</div>
    <slot></slot>
    <div v-if="error" class="field-error">
      <i data-lucide="alert-circle"></i>
      {{ error }}
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUpdated } from 'vue'

defineProps({
  label: {
    type: String,
    default: ''
  },
  hint: {
    type: String,
    default: ''
  },
  error: {
    type: String,
    default: ''
  }
})

const refreshIcons = () => {
  if (window.lucide) {
    window.lucide.createIcons()
  }
}

onMounted(refreshIcons)
onUpdated(refreshIcons)
</script>

<style scoped>
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -6px;
}

.field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #ef4444;
  font-size: 12px;
}

.field-error i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
</style>
