<script setup lang="ts">
  import { Loader2 } from "lucide-vue-next";

  interface Props {
    /**
     * Size of the loader
     * @default "md"
     */
    size?: "sm" | "md" | "lg";
    /**
     * Message to display below the loader
     */
    message?: string;
    /**
     * Whether the loader is centered
     * @default true
     */
    centered?: boolean;
    /**
     * Whether the loader is fullscreen
     * @default false
     */
    fullScreen?: boolean;
  }

  // Default props
  const props = withDefaults(defineProps<Props>(), {
    size: "md",
    centered: true,
    message: "",
    fullScreen: false,
  });

  // Calculate size class based on props
  const sizeClass = computed(() => {
    switch (props.size) {
      case "sm":
        return "h-4 w-4";
      case "lg":
        return "h-10 w-10";
      case "md":
      default:
        return "h-6 w-6";
    }
  });

  // Calculate container class based on props
  const containerClass = computed(() => {
    const classes = [];

    if (props.centered) {
      classes.push("flex flex-col items-center justify-center");
    }

    if (props.fullScreen) {
      classes.push("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm");
    } else {
      classes.push("py-6");
    }

    return classes.join(" ");
  });
</script>

<template>
  <div :class="containerClass">
    <Loader2 :class="[sizeClass, 'animate-spin text-primary']" />
    <p v-if="message" class="mt-2 text-sm text-muted-foreground">
      {{ message }}
    </p>
  </div>
</template>
