<script setup lang="ts">
withDefaults(
  defineProps<{
    src?: string
    alt?: string
    shape?: 'rect' | 'rounded'
  }>(),
  {
    shape: 'rounded',
    alt: '',
  },
)
</script>

<template>
  <div
    class="nych-image-slot"
    :class="[`nych-image-slot--${shape}`, { 'nych-image-slot--filled': src }]"
  >
    <img v-if="src" :src="src" :alt="alt" class="nych-image-slot-img" />
    <div v-else class="nych-image-slot-placeholder">
      <i class="pi pi-image" aria-hidden="true" />
    </div>
  </div>
</template>

<style scoped>
.nych-image-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--surface-2);
  border: 1px dashed var(--border);
}

.nych-image-slot--rounded {
  border-radius: var(--radius-xl);
}

.nych-image-slot--rect {
  border-radius: 0;
}

.nych-image-slot--filled {
  border-style: solid;
}

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

.nych-image-slot-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-dim);
  font-size: 1.5rem;
}
</style>
