<template>
  <div
    class="workbench-list-icon"
    :class="[`workbench-list-icon--${iconKey}`, `workbench-list-icon--${iconStyle}`]"
    :style="{ '--icon-color': color, '--icon-accent': accent || color }"
  >
    <span class="workbench-list-icon__halo" aria-hidden="true"></span>
    <span class="workbench-list-icon__panel" aria-hidden="true">
      <span class="workbench-list-icon__shine" aria-hidden="true"></span>
      <span class="workbench-list-icon__art" aria-hidden="true" v-html="iconMarkup"></span>
    </span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

import { workbenchIconMap } from '../../utils/workbenchIconAssets.js'

const props = defineProps({
  iconKey: { type: String, required: true },
  color: { type: String, default: 'var(--theme-primary)' },
  accent: { type: String, default: '' }
})

const iconMeta = computed(() => workbenchIconMap[props.iconKey] || workbenchIconMap.hospitality)
const iconMarkup = computed(() => iconMeta.value.markup)
const iconStyle = computed(() => iconMeta.value.style)
</script>

<style scoped>
.workbench-list-icon {
  position: relative;
  width: var(--workbench-list-icon-size, 48px);
  height: var(--workbench-list-icon-size, 48px);
  flex-shrink: 0;
  color: var(--icon-color, var(--theme-primary));
}

.workbench-list-icon__halo {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--icon-color, var(--theme-primary)) 78%, #ffffff);
  opacity: 0.72;
}

.workbench-list-icon__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--icon-color, var(--theme-primary)) 22%, var(--line, #e2e8f0));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.44)),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--icon-accent, var(--theme-primary-soft)) 64%, #fff) 0%,
      #fff 52%,
      color-mix(in srgb, var(--icon-color, var(--theme-primary)) 8%, var(--surface-soft, #f8fafc)) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.045);
}

.workbench-list-icon__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.42), transparent 44%);
  pointer-events: none;
}

.workbench-list-icon__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--workbench-list-icon-art-size, 28px);
  height: var(--workbench-list-icon-art-size, 28px);
}

.workbench-list-icon__art :deep(.workbench-heroicon) {
  width: var(--workbench-list-icon-art-size, 28px);
  height: var(--workbench-list-icon-art-size, 28px);
  display: block;
  color: color-mix(in srgb, var(--icon-color, var(--theme-primary)) 86%, var(--theme-primary-active));
}

.workbench-list-icon--outline .workbench-list-icon__art :deep(.workbench-heroicon) {
  stroke-width: 1.65;
}

.workbench-list-icon--solid .workbench-list-icon__art :deep(.workbench-heroicon path) {
  opacity: 0.96;
}
</style>
