<script setup lang="ts">
import { useImage } from '@vueuse/core'

const props = defineProps({
  source: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    required: true,
  },
  loadingIcon: {
    type: String,
    default: 'line-md:loading-loop',
  },
  loadingIconColor: {
    type: String,
    default: '{colors.gray.300}',
  },
  errorIcon: {
    type: String,
    default: 'icon-park-outline:fail-picture',
  },
  errorIconColor: {
    type: String,
    default: '{colors.gray.300}',
  },
})

const avatarUrl = props.source
const { isLoading, error } = useImage({ src: avatarUrl })
</script>

<template>
  <div>
    <Icon v-if="isLoading || error" :name="isLoading ? loadingIcon : errorIcon" size="64px" />

    <img v-else :src="props.source" />
  </div>
</template>

<style scoped lang="ts">
css({
  div: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '292px',
    width: '100%',

    '> img': {
      maxHeight: '292px',
      width: '100%',
      display: 'block',
      borderRadius: '{radii.md}',
      objectFit: 'cover',
      backgroundColor: '{colors.neutral.black}'
    }
  },
})
</style>
