<script setup lang="ts">
withDefaults(
  defineProps<{
    error?: boolean;
    hover?: boolean;
    increasedPadding?: boolean;
    padding?: boolean;
    warning?: boolean;
  }>(),
  {
    error: false,
    hover: true,
    increasedPadding: false,
    padding: true,
    warning: false,
  }
);
</script>

<template>
  <div
    class="group/card text-left relative flex flex-col flex-1 border-2 border-solid rounded-md shadow-md"
    :class="[
      padding && 'p-4',
      increasedPadding && 'md:p-6',
      hover && 'hover:shadow-orange/50 transition-all',
      error && 'text-white bg-unraid-red border-unraid-red',
      warning && 'text-black bg-yellow-100 border-yellow-100',
      !error && !warning && 'text-foreground bg-background border-muted',
    ]"
  >
    <slot />
  </div>
</template>
