---
import { Image } from '@astrojs/image/components';

import type { Photo } from '@/types/common';

export interface Props {
  src: Photo;
  alt: string;
  class?: string;
  loading?: 'eager' | 'lazy';
  width?: number;
  height?: number;
}

const { src, loading, ...props } = Astro.props;

const className = Astro.props.class ?? '';

const isRemoteImage = typeof src === 'string';
---

{
  isRemoteImage ? (
    <img class={className} src={src} {...props} />
  ) : (
    <Image format="webp" fit="cover" class={className} src={src} loading={loading} {...props} />
  )
}
