<template>
  <div class="header-modern">
    <div class="header-content">
      <div class="icon-circle">
        <v-icon size="36" color="white">mdi-hospital-building</v-icon>
      </div>
      <div class="header-text">
        <h1 class="title-modern">Check-in Pasien</h1>
        <p class="subtitle-modern">Sistem Antrean Rumah Sakit</p>
      </div>
    </div>
    
    <!-- Tabs Minimalis -->
    <v-tabs 
      :model-value="modelValue" 
      @update:model-value="updateTab"
      align-tabs="center" 
      class="tabs-modern mt-3"
      bg-color="transparent"
      slider-color="#FB8C00"
      height="40"
    >
      <v-tab value="scan" class="tab-modern">
        <v-icon size="20" class="mr-2">mdi-qrcode-scan</v-icon>
        <span>Scan QR</span>
      </v-tab>
      <v-tab value="manual" class="tab-modern">
        <v-icon size="20" class="mr-2">mdi-keyboard</v-icon>
        <span>Manual</span>
      </v-tab>
      <v-tab value="generate" class="tab-modern">
        <v-icon size="20" class="mr-2">mdi-qrcode</v-icon>
        <span>Generate QR</span>
      </v-tab>
    </v-tabs>
  </div>
</template>

<script setup lang="ts">
import type { TabValue } from '~/types/checkin'

interface Props {
  modelValue: TabValue
}

interface Emits {
  (e: 'update:modelValue', value: TabValue): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const updateTab = (value: TabValue) => {
  emit('update:modelValue', value)
}
</script>

<style scoped>
/* Header Modern Minimalis */
.header-modern {
  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
  padding: 20px 24px 16px;
  position: relative;
  overflow: hidden;
}

.header-modern::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 4px;
}

.icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-text {
  text-align: center;
}

.title-modern {
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin: 0;
  line-height: 1.2;
}

.subtitle-modern {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin: 2px 0 0;
  font-weight: 400;
}

.tabs-modern {
  position: relative;
  z-index: 1;
}

.tabs-modern :deep(.v-tab) {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  min-width: 120px;
  transition: all 0.3s ease;
}

.tabs-modern :deep(.v-tab:hover) {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.tabs-modern :deep(.v-tab--selected) {
  color: white !important;
  font-weight: 600;
}

.tabs-modern :deep(.v-slider) {
  background-color: #FB8C00 !important;
  height: 3px;
  border-radius: 2px;
}
</style>
