<template>
  <v-row class="search-section">
    <v-col cols="12" sm="6" class="py-2">
      <v-text-field
        :model-value="searchQuery"
        @update:model-value="$emit('update:searchQuery', $event)"
        density="comfortable"
        label="Cari pasien berdasarkan nama atau RM..."
        prepend-inner-icon="mdi-magnify"
        variant="outlined"
        hide-details
        single-line
        color="primary-600"
        bg-color="white"
        class="search-field"
      />
    </v-col>
    
    <v-col cols="12" sm="6" class="py-2">
      <v-tabs
        :model-value="selectedTab"
        @update:model-value="$emit('update:selectedTab', $event)"
        color="primary-600"
        align-tabs="end"
        class="filter-tabs"
        slider-color="primary-600"
      >
        <v-tab :value="0" class="tab-item">
          SEMUA 
          <v-chip size="small" color="primary-600" class="ml-2 chip-count">
            {{ allCount }}
          </v-chip>
        </v-tab>
        
        <v-tab :value="1" class="tab-item">
          PENDING 
          <v-chip size="small" color="primary-600" class="ml-2 chip-count">
            {{ pendingCount }}
          </v-chip>
        </v-tab>
        
        <v-tab :value="2" class="tab-item">
          VERIFIED 
          <v-chip size="small" color="primary-600" class="ml-2 chip-count">
            {{ verifiedCount }}
          </v-chip>
        </v-tab>
      </v-tabs>
    </v-col>
  </v-row>
</template>

<script setup>
defineProps({
  searchQuery: {
    type: String,
    default: ''
  },
  selectedTab: {
    type: Number,
    default: 0
  },
  allCount: {
    type: Number,
    default: 0
  },
  pendingCount: {
    type: Number,
    default: 0
  },
  verifiedCount: {
    type: Number,
    default: 0
  }
});

defineEmits(['update:searchQuery', 'update:selectedTab']);
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-500: #ABBED1;
$neutral-600: #89939E;
$neutral-300: #F5F7FA;
$primary-600: #FFA532;
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-semibold: 600;
$font-weight-bold: 700;

.search-section {
  background: $neutral-300;
  border-bottom: 1px solid $neutral-500;
  margin: 0;
  padding: 24px;
}

.search-field {
  border-radius: 8px;
  font-family: $font-family-base;
}

.filter-tabs {
  background: transparent;
  font-family: $font-family-base;
}

.tab-item {
  font-weight: $font-weight-bold;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-family: $font-family-base;
}

.chip-count {
  color: #000 !important;
  font-weight: $font-weight-bold;
  font-family: $font-family-base;
}
</style>