<script setup>
/**
 * Outlined button. Fixed: outlined, icon left, default size. Default variant secondary; use variant="danger" for delete.
 * In views set: label, icon (name), optionally variant="danger".
 */
import BaseButton from "./BaseButton.vue";

const props = defineProps({
  // Visual style: default secondary; allow primary + danger for flexibility.
  variant: {
    type: String,
    default: "secondary",
    validator: (v) => ["secondary", "primary", "danger"].includes(v),
  },
  label: { type: String, default: "" },
  icon: { type: String, default: "" },
  disabled: { type: Boolean, default: false },
  type: { type: String, default: "button" },
  // Optional small/large size, forwarded to BaseButton.
  size: {
    type: String,
    default: undefined,
    validator: (v) => !v || ["small", "large"].includes(v),
  },
  // Optional rounded style for icon buttons in tables.
  rounded: { type: Boolean, default: false },
  class: { type: [String, Object, Array], default: "" },
});
</script>

<template>
  <BaseButton
    :variant="props.variant"
    outlined
    icon-position="left"
    :label="props.label"
    :icon="props.icon"
    :disabled="props.disabled"
    :type="props.type"
    :size="props.size"
    :rounded="props.rounded"
    :class="props['class']"
    v-bind="$attrs"
  />
</template>
