<script setup lang="ts">
import { X } from '@lucide/vue'
import type { OperationResultDto } from '../../api/contracts'
import OperationResultCard from './OperationResultCard.vue'

defineProps<{
  result: OperationResultDto
  title: string
}>()

defineEmits<{
  close: []
}>()
</script>

<template>
  <aside class="operation-tray" aria-label="Letztes Operationsergebnis">
    <button
      type="button"
      class="operation-tray__close"
      aria-label="Operationsergebnis schließen"
      @click="$emit('close')"
    >
      <X :size="15" aria-hidden="true" />
    </button>
    <OperationResultCard :result="result" :title="title" />
  </aside>
</template>

<style scoped>
.operation-tray {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  width: min(430px, calc(100vw - 28px));
  filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--space-0) 68%, transparent));
}

.operation-tray__close {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--space-2) 82%, transparent);
  color: var(--tx-2);
}

.operation-tray__close:hover,
.operation-tray__close:focus-visible {
  border-color: var(--line-2);
  color: var(--tx);
  outline: 2px solid color-mix(in srgb, var(--a-blue) 45%, transparent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .operation-tray {
    right: 14px;
    bottom: 14px;
  }
}
</style>
