<template>
  <button
    :type="type"
    :class="buttonClasses"
    :disabled="disabled"
    @click="handleClick"
  >
    <VIcon v-if="iconLeft && !iconOnly" :name="iconLeft" :size="iconSize" class="mr-1" />
    <VIcon v-if="iconOnly && (iconLeft || iconRight)" :name="iconNameForIconOnly" :size="iconSize" />
    <span v-if="!iconOnly" :class="{ 'sr-only': iconOnly && (iconLeft || iconRight) }">
      <slot>{{ label }}</slot>
    </span>
    <VIcon v-if="iconRight && !iconOnly" :name="iconRight" :size="iconSize" class="ml-1" />
  </button>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue';
import VIcon from './VIcon.vue'; // Assuming VIcon.vue is in the same directory

type ButtonVariant = 'primary' | 'secondary' | 'neutral' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg'; // Added 'lg' for consistency, though not in SCSS class list initially
type ButtonType = 'button' | 'submit' | 'reset';

export default defineComponent({
  name: 'VButton',
  components: {
    VIcon,
  },
  props: {
    label: {
      type: String,
      default: 'Button',
    },
    variant: {
      type: String as PropType<ButtonVariant>,
      default: 'primary',
      validator: (value: string) => ['primary', 'secondary', 'neutral', 'danger'].includes(value),
    },
    size: {
      type: String as PropType<ButtonSize>,
      default: 'md',
      validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    iconLeft: {
      type: String,
      default: null,
    },
    iconRight: {
      type: String,
      default: null,
    },
    iconOnly: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String as PropType<ButtonType>,
      default: 'button',
      validator: (value: string) => ['button', 'submit', 'reset'].includes(value),
    },
  },
  emits: ['click'],
  setup(props, { emit }) {
    const buttonClasses = computed(() => {
      const classes = [
        'btn',
        `btn-${props.variant}`,
        `btn-${props.size}`,
      ];
      if (props.iconOnly && (props.iconLeft || props.iconRight)) {
        classes.push('btn-icon-only');
      }
      if (props.disabled) {
        classes.push('btn-disabled'); // Assuming a general disabled class
      }
      return classes;
    });

    const iconSize = computed(() => {
      // Adjust icon size based on button size, or define specific icon sizes
      if (props.size === 'sm') return 'sm';
      // if (props.size === 'lg') return 'lg'; // VIcon might not have lg, handle appropriately
      return undefined; // VIcon default size
    });

    const iconNameForIconOnly = computed(() => {
      return props.iconLeft || props.iconRight;
    });

    const handleClick = (event: MouseEvent) => {
      if (!props.disabled) {
        emit('click', event);
      }
    };

    return {
      buttonClasses,
      iconSize,
      iconNameForIconOnly,
      handleClick,
    };
  },
});
</script>

<style lang="scss" scoped>
// Basic button styling - will be expanded in a later task
.btn {
  padding: 0.5em 1em;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.7;
  }

  &.btn-disabled,
  &[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// Variants
.btn-primary {
  background-color: #007bff; // Example color
  color: white;
  border-color: #007bff;
}

.btn-secondary {
  background-color: #6c757d; // Example color
  color: white;
  border-color: #6c757d;
}

.btn-neutral {
  background-color: #f8f9fa; // Example color
  color: #212529;
  border-color: #ced4da;
}

.btn-danger {
  background-color: #dc3545; // Example color
  color: white;
  border-color: #dc3545;
}

// Sizes
.btn-sm {
  padding: 0.25em 0.5em;
  font-size: 0.875em;
}

.btn-md {
  // Default size, styles are in .btn
}

.btn-lg {
  padding: 0.6em 1.2em;
  font-size: 1.125em;
}

// Icon only
.btn-icon-only {
  padding: 0.5em; // Adjust padding for icon-only buttons
  // Ensure VIcon fills the space or adjust VIcon size if needed
  & .mr-1 { margin-right: 0 !important; } // Remove margin if accidentally applied
  & .ml-1 { margin-left: 0 !important; } // Remove margin if accidentally applied
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

// Margins for icons next to text (can be refined)
.mr-1 {
  margin-right: 0.25em;
}
.ml-1 {
  margin-left: 0.25em;
}
</style>
