<template>
  <div
    class="nv-field"
    :class="[{ 'nv-field--error': error }, { 'nv-field--success': success }]"
  >
    <div>
      <slot />
    </div>
    <NvFieldDetails v-bind="fieldDetailsProps" :size="size" class="mt-1" />
  </div>
</template>

<script>
import { computed } from "vue";
import { NvFieldDetails } from "../NvFieldDetails";
import {
  useFieldDetailsProps,
  useGetFieldDetailsProps,
} from "../../composables/fieldDetails";
import { useSizeProps } from "../../composables/sizeable";

export default {
  name: "NvField",
  components: { NvFieldDetails },
  props: {
    ...useFieldDetailsProps,
    ...useSizeProps,
    success: Boolean,
    error: Boolean,
  },
  setup(props) {
    const fieldDetailsProps = computed(() => useGetFieldDetailsProps(props));

    return {
      fieldDetailsProps,
    };
  },
};
</script>
