<script setup lang="ts">
defineProps<{
  item: { title: string; thumb?: string };
  nuxtImg?: boolean;
  imgWidth?: number;
  imgHeight?: number;
}>();
</script>

<template>
  <div class="selector">
    <span class="selector-border-top" aria-hidden="true">────────</span>
    <component :is="nuxtImg ? 'NuxtImg' : 'img'"
      v-if="item.thumb"
      :src="item.thumb"
      :alt="item.title"
      class="selector-img"
      width="600" height="250"
      fit="cover"
    />
    <span class="selector-border-bottom" aria-hidden="true">────────</span>
    <div class="overlay-label">{{ item.title }}</div>
  </div>
</template>

<style lang="scss" scoped>
.selector {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.1s steps(3, end);
  display: block;
  border: 2px solid var(--color-border-color);
  background-color: var(--color-background-fore);

  &:hover {
    border-color: var(--color-link);
    transform: translateY(-2px);
    box-shadow: 4px -4px 0px 0px var(--color-link);
  }

  .selector-border-top,
  .selector-border-bottom {
    position: absolute;
    left: 30px;
    right: 30px;
    height: 0;
    color: var(--color-border-color);
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    z-index: 10;
    transition: color 0.1s steps(2, end);
  }

  .selector-border-top {
    top: -2px;
  }

  .selector-border-bottom {
    bottom: -2px;
  }
}

.selector-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overlay-label {
  position: absolute;
  bottom: -2px;
  left: 30px;
  background-color: var(--color-link);
  color: var(--color-background-fore);
  padding: 2px 8px;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0px 0px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* Ensure hovered state works when selector is wrapped in a link */
.selector-wrap {
  display: block;
  text-decoration: none;
}

@media (max-width: 900px) {
  .selector {
    height: 200px;
  }
}

@media (max-width: 640px) {
  .selector {
    height: 180px;
  }
}
</style>
