<script setup>
// Wraps PrimeVue Button; use variant (not severity). Use icon name (e.g. "plus") not "pi pi-*". Extra attrs via $attrs.
import { computed } from "vue";
import Button from "primevue/button";
import { resolveIcon } from "../../lib/icons";

const props = defineProps({
  variant: {
    type: String,
    default: "primary",
    validator: (v) =>
      [
        "primary",
        "secondary",
        "success",
        "danger",
        "warning",
        "info",
        "help",
        "contrast",
      ].includes(v),
  }, // visual style (maps to PrimeVue severity)
  label: { type: String, default: "" }, // button text; omit for icon-only
  icon: { type: String, default: "" }, // icon name (e.g. "plus", "trash") or full class; resolved via resolveIcon
  iconPosition: {
    type: String,
    default: "left",
    validator: (v) => ["left", "right"].includes(v),
  }, // left | right
  outlined: { type: Boolean, default: false },
  rounded: { type: Boolean, default: false },
  text: { type: Boolean, default: false }, // text-style (e.g. Cancel)
  iconOnly: { type: Boolean, default: false },
  size: {
    type: String,
    default: undefined,
    validator: (v) => !v || ["small", "large"].includes(v),
  }, // small | large
  fluid: { type: Boolean, default: false }, // full width
  disabled: { type: Boolean, default: false },
  loading: { type: Boolean, default: false },
  type: { type: String, default: "button" }, // native type
  as: { type: [String, Object], default: undefined }, // e.g. "a" for link; use href via $attrs
  class: { type: [String, Object, Array], default: "" },
});

const emit = defineEmits(["click", "focus", "blur"]);

const severityMap = {
  primary: "primary",
  secondary: "secondary",
  success: "success",
  danger: "danger",
  warning: "warn",
  info: "info",
  help: "help",
  contrast: "contrast",
};

const pSeverity = computed(() => severityMap[props.variant] ?? "primary");
const pIconPos = computed(() =>
  props.iconPosition === "right" ? "right" : "left",
);
const pIcon = computed(() =>
  props.icon ? resolveIcon(props.icon) : undefined,
);
</script>

<template>
  <Button
    :label="label"
    :icon="pIcon"
    :icon-pos="pIconPos"
    :severity="pSeverity"
    :outlined="outlined"
    :rounded="rounded"
    :text="text"
    :size="size"
    :fluid="fluid"
    :disabled="disabled"
    :loading="loading"
    :type="type"
    :as="as"
    :class="[props.class, iconOnly && 'icon-only']"
    v-bind="$attrs"
    @click="emit('click', $event)"
    @focus="emit('focus', $event)"
    @blur="emit('blur', $event)"
  />
</template>
