<template>
  <div
    :class="[
      'rounded-[25px] shadow-card p-6 sm:px-8 sm:py-10',
      'transition-all duration-500 ease-in-out',
      variantClasses,
      props.class,
    ]"
    data-testid="titan-card"
  >
    <!-- Grid Layout: Two columns on top (header/logo), one column on bottom (content) -->
    <div class="grid grid-cols-[1fr_auto] gap-x-4 gap-y-6">
      <!-- Header Section (Left Column) -->
      <div
        v-if="$slots.header || props.title"
        data-testid="titan-card-header"
      >
        <!-- Custom header slot -->
        <slot v-if="$slots.header" name="header" />

        <!-- Default header with title -->
        <h2
          v-else-if="props.title"
          class="font-serif text-heading-md sm:text-heading-lg leading-[1.3] transition-colors duration-500 ease-in-out"
          :class="titleClasses"
        >
          {{ props.title }}
        </h2>
      </div>

      <!-- Empty div if no header to maintain grid -->
      <div v-else></div>

      <!-- Logo (Right Column) -->
      <div
        v-if="props.logo"
        class="flex items-start justify-end"
        data-testid="titan-card-logo"
      >
        <img
          v-if="props.variant === 'system'"
          src="/images/logo-small-white.svg"
          alt="Titan Casket"
          class="h-14 w-14 sm:h-[70px] sm:w-[70px] transition-opacity duration-500 ease-in-out"
        />
        <img
          v-else
          src="/images/logo-small.svg"
          alt="Titan Casket"
          class="h-14 w-14 sm:h-[70px] sm:w-[70px] transition-opacity duration-500 ease-in-out"
        />
      </div>

      <!-- Content Section (Full Width, Bottom Row) -->
      <div
        class="col-span-2 transition-colors duration-500 ease-in-out"
        :class="contentClasses"
        data-testid="titan-card-content"
      >
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CardProps, CardEmits } from '@/types/components'
import { computed } from 'vue'

/**
 * TitanCard - A flexible layout card component with default and system variants
 *
 * @component
 * @example
 * <TitanCard variant="default" title="Welcome" :logo="true">
 *   <p>Card content goes here</p>
 * </TitanCard>
 */

interface Props extends CardProps {
  /**
   * Card variant - default (white) or system (translucent)
   * @default 'default'
   */
  variant?: 'default' | 'system'

  /**
   * Heading text displayed in the card header
   */
  title?: string

  /**
   * Whether to show the Titan logo in the top right
   * @default true
   */
  logo?: boolean

  /**
   * Additional CSS classes to apply
   */
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  logo: true,
})

defineEmits<CardEmits>()

// Computed classes for variant styling
const variantClasses = computed(() => {
  if (props.variant === 'system') {
    return 'bg-white/[0.34] backdrop-blur-[8.4px] border border-white/[0.27] text-white'
  }
  return 'bg-white text-titan-gray-800'
})

// Computed classes for title styling
const titleClasses = computed(() => {
  if (props.variant === 'system') {
    return 'text-white'
  }
  return 'text-titan-green-800'
})

// Computed classes for content styling (no longer needed for text color - it inherits from root)
const contentClasses = computed(() => {
  return ''
})
</script>