component OptimizedImage {
  outputs {
    load(payload: { sourceEvent: Event; src: string })
    error(payload: { sourceEvent: Event; src: string })
  }
  props {
    src: string = ""
    srcset: string = ""
    sizes: string = ""
    alt: string = ""
    width: string = ""
    height: string = ""
    loading: string = "lazy"
    decoding: string = "async"
    fetchpriority: string = "auto"
    placeholder: string = ""
    objectFit: string = "cover"
    rounded: boolean = false
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }
  view {
    <img
      {...attrs}
      src='{src}'
      srcset='{srcset}'
      sizes='{sizes}'
      alt='{alt}'
      width='{width}'
      height='{height}'
      loading='{loading}'
      decoding='{decoding}'
      fetchpriority='{fetchpriority}'
      style='object-fit:{objectFit};background-image:{placeholder ? "url(" + placeholder + ")" : "none"};background-size:cover'
      class='wire-next wire-next--color-{color} wire-next--size-{size} max-w-full {rounded ? "rounded-[var(--wire-radius-sm)]" : ""} {class}'
      @load='output.load({ sourceEvent: event, src: src })'
      @error='output.error({ sourceEvent: event, src: src })'
    />
  }
}