<script setup lang="ts">
import squareIcon from '../../assets/images/icons/square.svg'

defineProps<{
  seatWinds: {
    top: string
    right: string
    bottom: string
    left: string
  }
}>()
</script>

<template>
  <div class="wind-square">
    <img class="square-base" :src="squareIcon" alt="" />
    <div class="diagonal diagonal-a"></div>
    <div class="diagonal diagonal-b"></div>

    <span class="wind-slot wind-top">
      <img class="wind-icon" :src="seatWinds.top" alt="上方位风" />
    </span>
    <span class="wind-slot wind-right">
      <img class="wind-icon" :src="seatWinds.right" alt="右方位风" />
    </span>
    <span class="wind-slot wind-bottom">
      <img class="wind-icon" :src="seatWinds.bottom" alt="下方位风" />
    </span>
    <span class="wind-slot wind-left">
      <img class="wind-icon" :src="seatWinds.left" alt="左方位风" />
    </span>
  </div>
</template>

<style scoped>
.wind-square {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 240, 196, 0.2);
}

.square-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter:
    sepia(1)
    hue-rotate(92deg)
    saturate(3.3)
    brightness(0.22);
}

.wind-square::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 238, 191, 0.08), transparent 42%),
    linear-gradient(145deg, rgba(5, 33, 24, 0.34), rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.diagonal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16, 40, 31, 0.22), rgba(25, 55, 42, 0.72), rgba(16, 40, 31, 0.22));
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.08);
  transform-origin: center;
  z-index: 1;
}

.diagonal-a {
  transform: translate(-50%, -50%) rotate(45deg);
}

.diagonal-b {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.wind-slot {
  position: absolute;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.wind-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.wind-top {
  top: 10px;
  left: 34px;
}

.wind-right {
  top: 34px;
  right: 10px;
}

.wind-bottom {
  bottom: 10px;
  left: 34px;
}

.wind-left {
  top: 34px;
  left: 10px;
}
</style>
