---
// CP-BASE-008 image
interface Props {
  src: string;
  alt: string;
  width?: number;
  height?: number;
  loading?: 'lazy' | 'eager';
  variant?: 'default' | 'cover' | 'contain' | 'rounded' | 'circle';
  class?: string;
}
const {
  src,
  alt,
  width,
  height,
  loading = 'lazy',
  variant = 'default',
  class: className,
} = Astro.props;
---
<img
  src={src}
  alt={alt}
  width={width}
  height={height}
  loading={loading}
  decoding="async"
  class={`image image--${variant} ${className ?? ''}`}
/>

<style>
  .image {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .image--cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .image--contain {
    object-fit: contain;
  }
  .image--rounded {
    border-radius: var(--radius, 8px);
  }
  .image--circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
</style>