<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: 56px;
  height: 56px;
  flex-shrink: 0;
  color: var(--icon-color, var(--theme-primary));
}

.workbench-list-icon__halo {
  position: absolute;
  inset: -3px;
  border-radius: 20px;
  background: radial-gradient(
    circle at 50% 40%,
    color-mix(in srgb, var(--icon-color, var(--theme-primary)) 24%, transparent) 0%,
    transparent 72%
  );
  opacity: 0.7;
}

.workbench-list-icon__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--icon-color, var(--theme-primary)) 18%, var(--line, #e2e8f0));
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--icon-accent, var(--theme-primary-soft)) 72%, #fff) 0%,
      #fff 44%,
      color-mix(in srgb, var(--icon-color, var(--theme-primary)) 7%, var(--surface-soft, #f8fafc)) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 20px color-mix(in srgb, var(--icon-color, var(--theme-primary)) 12%, transparent);
}

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

.workbench-list-icon__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.workbench-list-icon__art :deep(.workbench-heroicon) {
  width: 30px;
  height: 30px;
  display: block;
  color: color-mix(in srgb, var(--icon-color, var(--theme-primary)) 86%, var(--theme-primary-active));
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--icon-color, var(--theme-primary)) 18%, transparent));
}

.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>
