<template>
  <div class="form-group">
    <label v-if="label" :for="forId" class="form-label">{{ label }}</label>
    <slot></slot>
    <p v-if="errorMessage" class="form-error-message">{{ errorMessage }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'VFormField',
  props: {
    label: {
      type: String,
      default: null,
    },
    // 'for' is a reserved keyword in JS, so often component props use 'htmlFor' or similar.
    // However, Vue allows 'for' in props directly. Let's stick to 'forId' for clarity to avoid confusion.
    forId: {
      type: String,
      default: null,
    },
    errorMessage: {
      type: String,
      default: null,
    },
  },
  setup(props) {
    // No specific setup logic needed for this component's current requirements.
    // Props are directly used in the template.
    return {};
  },
});
</script>

<style lang="scss" scoped>
.form-group {
  margin-bottom: 1rem; // Spacing between form fields
}

.form-label {
  display: block;
  margin-bottom: 0.5rem; // Space between label and input
  font-weight: 500;
  // Add other label styling as needed from design system
  // e.g., color: var(--label-color);
}

.form-error-message {
  margin-top: 0.25rem; // Space between input and error message
  font-size: 0.875em; // Smaller text for error messages
  color: #dc3545; // Example error color (Bootstrap's danger color)
                  // Replace with SCSS variable: var(--danger-color) or similar
  // Add other error message styling as needed
}

// Styling for slotted content (inputs, textareas, etc.) will typically
// be handled by those components themselves (e.g., VInput, VTextarea).
// However, you might want to ensure consistent width or display:
// ::v-deep(input), ::v-deep(textarea), ::v-deep(select) {
//   width: 100%; // Example to make slotted inputs take full width of form-group
// }
</style>
