<script setup lang="ts">
/**
 * ExperimentaCard Component
 *
 * Glass-morphism card component based on the experimenta Design System.
 *
 * @example
 * <ExperimentaCard>Content here</ExperimentaCard>
 * <ExperimentaCard variant="info">Info section</ExperimentaCard>
 * <ExperimentaCard title="Card Title">Content</ExperimentaCard>
 */

interface Props {
  /** Card variant */
  variant?: 'glass' | 'info' | 'contact' | 'progress'
  /** Card title (optional) */
  title?: string
  /** Title color (only for info/contact variants) */
  titleColor?: 'accent' | 'primary'
  /** Show left accent border */
  accentBorder?: boolean
}

withDefaults(defineProps<Props>(), {
  variant: 'glass',
  titleColor: 'accent',
  accentBorder: false,
})
</script>

<template>
  <div
    :class="[
      'card-experimenta',
      `card-${variant}`,
      {
        'card-accent-border': accentBorder || variant !== 'glass',
      },
    ]"
  >
    <!-- Title Slot or Prop -->
    <h3 v-if="title || $slots.title" :class="['card-title', `title-${titleColor}`]">
      <slot name="title">{{ title }}</slot>
    </h3>

    <!-- Main Content -->
    <slot />
  </div>
</template>

<style scoped>
/* Base Card Styles */
.card-experimenta {
  @apply rounded-xl;
  @apply p-8 md:p-6 sm:p-5;
  @apply transition-all duration-300;
}

/* Glass-morphism Variant (Main Card) */
.card-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(15px);
  @apply border border-white/20;
  @apply shadow-glass;
  @apply rounded-2xl;
  @apply p-15 md:p-10 sm:p-8;
}

@media (max-width: 768px) {
  .card-glass {
    @apply rounded-lg;
  }
}

/* Info Variant */
.card-info {
  @apply bg-white/8;
}

/* Contact Variant */
.card-contact {
  @apply bg-white/8;
  @apply text-center;
}

/* Progress Variant */
.card-progress {
  @apply bg-white/8;
  @apply rounded-2xl md:rounded-lg;
}

/* Accent Border (Left) - Safrangold (#f59d24) */
.card-accent-border {
  border-left: 6px solid #f59d24;
  @apply rounded-l-lg;
}

/* Card Title */
.card-title {
  @apply font-medium mb-4;
  @apply text-lg md:text-base;
}

.title-accent {
  @apply text-accent;
}

.title-primary {
  @apply text-primary;
}

/* Hover Effect (Optional) */
.card-experimenta:hover {
  @apply shadow-2xl;
}
</style>
