<template>
  <div class="page-header" :class="`page-header-${theme}`">
    <div class="header-content">
      <div class="header-left">
        <div class="header-icon">
          <v-icon size="32" color="white">{{ icon }}</v-icon>
        </div>
        <div class="header-text">
          <h2 class="page-title">{{ title }}</h2>
          <p class="page-subtitle">{{ subtitle }}</p>
        </div>
      </div>
      <slot name="actions">
        <v-btn 
          v-if="showAddButton"
          color="white" 
          elevation="0"
          class="add-btn"
          :class="`add-btn-${theme}`"
          @click="$emit('add-click')"
        >
          <v-icon left size="20">mdi-plus-circle</v-icon>
          {{ addButtonText }}
        </v-btn>
      </slot>
    </div>
  </div>
</template>

<script setup>
defineProps({
  icon: {
    type: String,
    default: 'mdi-view-dashboard'
  },
  title: {
    type: String,
    required: true
  },
  subtitle: {
    type: String,
    default: ''
  },
  showAddButton: {
    type: Boolean,
    default: true
  },
  addButtonText: {
    type: String,
    default: 'Tambah'
  },
  theme: {
    type: String,
    default: 'primary', // 'primary', 'secondary', 'success', or 'accent'
    validator: (value) => ['primary', 'secondary', 'success', 'accent'].includes(value)
  }
});

defineEmits(['add-click']);
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$primary-600: #FFA532;
$primary-700: #FF9B1B;
$secondary-600: #0671E0;
$secondary-700: #0053AD;
$success-600: #009262;
$success-700: #1B6E53;
$accent-600: #8B5CF6;
$accent-700: #7C3AED;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-semibold: 600;

.page-header {
  border-radius: 16px 16px 0 0;
}

.page-header-primary {
  background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
  box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
}

.page-header-secondary {
  background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
  box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
}

.page-header-success {
  background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
  box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
}

.page-header-accent {
  background: linear-gradient(135deg, $accent-600 0%, $accent-700 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  color: $neutral-100;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  margin-right: 20px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 36px;
  line-height: 44px;
  font-weight: $font-weight-semibold;
  margin: 0;
  color: $neutral-100;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  margin: 4px 0 0 0;
  opacity: 0.9;
  font-size: 16px;
  line-height: 24px;
  font-weight: $font-weight-regular;
  color: $neutral-100;
}

.add-btn {
  font-weight: $font-weight-semibold;
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 16px;
  line-height: 24px;
}

.add-btn-primary {
  color: $primary-600 !important;
}

.add-btn-secondary {
  color: $secondary-600 !important;
}

.add-btn-success {
  color: $success-600 !important;
}

.add-btn-accent {
  color: $accent-600 !important;
}
</style>