---
const props = Astro.props;
const { src, alt, title } = props;
---

<div class="relative rounded-xl border border-border overflow-hidden">
  <div class="p-1">
    <img
      src={src}
      alt={alt}
      title={title}
      class="w-full h-auto rounded-lg"
      {...props}
    />
    {
      title && (
        <div class="text-center py-2">
          <p class="text-muted-foreground text-sm">{title}</p>
        </div>
      )
    }
  </div>
</div>
