<template>
  <div class="ds-media" :class="[`ds-media--${ratio}`]">
    <img
      class="ds-media__img"
      :class="[`ds-media__img--${fit}`]"
      :src="src"
      :alt="alt"
      loading="lazy"
      decoding="async"
    />
  </div>
</template>

<script setup>
  defineProps({
    src: { type: String, required: true },
    alt: { type: String, default: '' },
    fit: { type: String, default: 'cover' },
    ratio: { type: String, default: '' }, // 16-9 / 4-3 / square
  })
</script>

<style lang="scss">
  .ds-media {
    width: 100%;
    background: rgba(0,0,0,0.04);
    overflow: hidden;
    &--16-9 { aspect-ratio: 16 / 9; }
    &--4-3 { aspect-ratio: 4 / 3; }
    &--3-4 { aspect-ratio: 3 / 4; }
    &--5-4 { aspect-ratio: 5 / 4; }
    &--square { aspect-ratio: 1 / 1; }

    .ds-media__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
        &--cover { object-fit:cover; }
        &--contain { object-fit:contain; }
    }
  }

</style>
