<template>
  <v-card class="filter-card" elevation="0">
    <v-card-text>
      <v-row align="center">
        <v-col cols="12" md="6">
          <v-text-field
            :model-value="searchQuery"
            @update:model-value="$emit('update:searchQuery', $event)"
            prepend-inner-icon="mdi-magnify"
            label="Pencarian"
            :placeholder="searchPlaceholder"
            variant="outlined"
            density="comfortable"
            hide-details
            clearable
            class="search-field"
          />
        </v-col>
        <v-col cols="12" md="3">
          <v-select
            :model-value="statusFilter"
            @update:model-value="$emit('update:statusFilter', $event)"
            :items="statusOptions"
            label="Status"
            variant="outlined"
            density="comfortable"
            hide-details
            clearable
            class="filter-select"
          />
        </v-col>
        <v-col cols="12" md="3">
          <v-btn
            color="primary-600"
            variant="outlined"
            block
            size="large"
            @click="$emit('refresh')"
            :loading="loading"
            class="refresh-btn"
          >
            <v-icon start>mdi-refresh</v-icon>
            Refresh Data
          </v-btn>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup>
defineProps({
  searchQuery: {
    type: String,
    default: ''
  },
  statusFilter: {
    type: String,
    default: null
  },
  statusOptions: {
    type: Array,
    default: () => ['Terdaftar', 'Belum Terdaftar', 'Proses']
  },
  searchPlaceholder: {
    type: String,
    default: 'Cari nama pasien, No. RM, atau alamat...'
  },
  loading: {
    type: Boolean,
    default: false
  }
});

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

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

.filter-card {
  border-radius: 12px;
  border: 1px solid $neutral-500;
  background: $neutral-100;
  margin-bottom: 16px;
}

.search-field,
.filter-select {
  font-family: $font-family-base;
}

.refresh-btn {
  text-transform: none;
  font-weight: $font-weight-semibold;
  font-family: $font-family-base;
}
</style>