<template>
  <div
    role="status"
    :aria-label="label"
    class="spinner-dots"
    :class="sizeClass"
  >
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

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

const props = defineProps({
  size: {
    type: String, // 'sm', 'md'
    default: 'md',
    validator: (value: string) => ['sm', 'md'].includes(value),
  },
  label: {
    type: String,
    default: 'Loading...',
  },
});

const sizeClass = computed(() => {
  // Based on valerie-ui.scss, 'spinner-dots' is the medium size.
  // Only 'sm' size needs an additional specific class.
  return props.size === 'sm' ? 'spinner-dots-sm' : null;
});
</script>

<style lang="scss" scoped>
// Styles for .spinner-dots and .spinner-dots-sm are assumed to be globally available
// from valerie-ui.scss or a similar imported stylesheet.
// For completeness in a standalone component context, they would be defined here.
// Example (from valerie-ui.scss structure):

// .spinner-dots {
//   display: inline-flex; // Changed from inline-block for better flex alignment if needed
//   align-items: center; // Align dots vertically if their heights differ (should not with this CSS)
//   justify-content: space-around; // Distribute dots if container has more space (width affects this)
//   // Default (medium) size variables from valerie-ui.scss
//   // --spinner-dot-size: 8px;
//   // --spinner-spacing: 2px;
//   // width: calc(var(--spinner-dot-size) * 3 + var(--spinner-spacing) * 2);
//   // height: var(--spinner-dot-size);

//   span {
//     display: inline-block;
//     width: var(--spinner-dot-size, 8px);
//     height: var(--spinner-dot-size, 8px);
//     margin: 0 var(--spinner-spacing, 2px); // Replaces justify-content if width is tight
//     border-radius: 50%;
//     background-color: var(--spinner-color, #007bff); // Use a CSS variable for color
//     animation: spinner-dots-bounce 1.4s infinite ease-in-out both;

//     &:first-child { margin-left: 0; }
//     &:last-child { margin-right: 0; }

//     &:nth-child(1) {
//       animation-delay: -0.32s;
//     }
//     &:nth-child(2) {
//       animation-delay: -0.16s;
//     }
//     // nth-child(3) has no delay by default in the animation
//   }
// }

// .spinner-dots-sm {
//   // Override CSS variables for small size
//   --spinner-dot-size: 6px;
//   --spinner-spacing: 1px;
//   // Width and height will adjust based on the new variable values if .spinner-dots uses them.
// }

// @keyframes spinner-dots-bounce {
//   0%, 80%, 100% {
//     transform: scale(0);
//   }
//   40% {
//     transform: scale(1.0);
//   }
// }

// Since this component relies on styles from valerie-ui.scss,
// ensure that valerie-ui.scss is imported in the application's global styles
// or in a higher-level component. If these styles are not present globally,
// the spinner will not render correctly.
// For Storybook, this means valerie-ui.scss needs to be imported in .storybook/preview.js or similar.
</style>
