<template>
  <div class="lm-filter-tabs" :class="[`mode-${mode}`]">
    <button
      v-for="item in options"
      :key="item.key"
      class="filter-btn"
      :class="{ active: item.key === modelValue }"
      type="button"
      @click="handleSelect(item.key)"
    >
      {{ item.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, defineProps } from "vue";

export interface FilterTabOption {
  key: string;
  label: string;
}

const props = defineProps<{
  modelValue: string;
  options: FilterTabOption[];
  mode?: "default" | "compact";
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
}>();

const mode = props.mode ?? "default";

function handleSelect(key: string) {
  if (key === props.modelValue) return;
  emit("update:modelValue", key);
}
</script>

<style scoped lang="scss">
.lm-filter-tabs {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 99px;
  padding: 6px;
  gap: 2px;
}

.mode-compact {
  background: rgba(230, 235, 245, 0.9);
  padding: 4px;
}

.filter-btn {
  font-size: 24px;
  color: #555;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 16px;
  border-radius: 99px;
  transition: all 0.2s;
  white-space: nowrap;

  &.active {
    background: #fff;
    color: #333;
    font-weight: 500;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }

  &:not(.active):hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

.mode-compact .filter-btn {
  font-size: 22px;
  color: #6f7786;
  padding: 5px 14px;
}
</style>
