---
import '@styles/global.css';
import { Image } from "astro:assets";
import type { ImageMetadata } from 'astro';

interface Props {
    alt: string;
    bgcolor?: string;
    eager?: boolean;
    src: ImageMetadata;
    text: string;
    textColor?: string;
}

const {
  alt,
  bgcolor = '',
  eager = false,
  src,
  text,
  textColor = '',
} = Astro.props as Props;

const loadingMode = eager ? 'eager' : 'lazy';
---

<div class={`flex border-stroke-dark border rounded-md p-1 pr-2.5 gap-1.5 items-center ${bgcolor}`}>
  <Image
    src={src}
    alt={alt}
    class="w-5 h-5 rounded-sm"
    loading={loadingMode}
  />
  <span class={`text-xs font-mono ${textColor}`}>{text}</span>
</div>
