<script lang="ts" setup>
import type { WorkloadEntry } from '@/stores/estimator'

interface Props {
  workloadMap: Record<string, WorkloadEntry>
  modelValue: string | null
}

defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'open-quiz': []
}>()

function pick(key: string): void {
  if (key === 'not_sure') {
    emit('open-quiz')
    return
  }
  emit('update:modelValue', key)
}
</script>

<template>
  <div class="workload-picker">
    <div class="text-overline text-medium-emphasis mb-2">What are you running?</div>
    <div class="workload-picker__grid">
      <button
        v-for="(entry, key) in workloadMap"
        :key="key"
        type="button"
        class="workload-picker__chip"
        :class="{
          'workload-picker__chip--active': modelValue === key,
          'workload-picker__chip--quiz': key === 'not_sure',
        }"
        @click="pick(key)"
      >
        <VIcon :icon="entry.icon" size="22" />
        <span class="text-body-2 font-weight-medium">{{ entry.label }}</span>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.workload-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  @media (max-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.workload-picker__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
  background: rgba(var(--v-theme-surface), 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    border-color: rgba(var(--v-theme-primary), 0.45);
    background: rgba(var(--v-theme-surface), 0.85);
    transform: translateY(-1px);
  }
}

.workload-picker__chip--active {
  border-color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.14);
  box-shadow: 0 4px 16px rgba(var(--v-theme-primary), 0.18);
}

.workload-picker__chip--quiz {
  border-style: dashed;
  border-color: rgba(var(--v-theme-on-surface), 0.18);

  &:hover {
    border-style: solid;
  }
}
</style>
