component Image {
  props {
    size: string = "default"
    color: string = "primary"
    src: string = ""
    alt: string = ""
    width: string = ""
    height: string = ""
    loading: string = "lazy"
    rounded: boolean = false
    class: string = ""
  }

  view {
    <figure
      data-ui-component="Image"
      class='relative m-0 overflow-hidden bg-[var(--wire-color-surface-soft)] {class}'
      class:rounded-2xl='rounded'
    >
      {#if src}
        <img
          src='{src}'
          alt='{alt}'
          width='{width}'
          height='{height}'
          loading='{loading}'
          decoding="async"
          class="block h-auto w-full object-cover transition duration-300"
          class:aspect-square='size === "square"'
          class:aspect-video='size === "video"'
          class:aspect-[4/3]='size === "landscape"'
          class:aspect-[3/4]='size === "portrait"'
        />
      {:else}
        <div
          class="flex min-h-48 w-full items-center justify-center text-[var(--wire-color-text-muted)]"
          role="img"
          aria-label='{alt || "Image placeholder"}'
        >
          <span class="icon-[lucide--image] size-8" aria-hidden="true"></span>
        </div>
      {/if}

      <slot></slot>
    </figure>
  }
}