import {Image} from "@rixl/media-react";

<Image
  id="your-image-id" // Required: Your image ID from dash.rixl.com/images
/>

import {Image} from "@rixl/media-react";

function BasicImage() {
  return (
    <div className="max-w-2xl mx-auto">
      <Image id="your-image-id" className="object-contain w-full h-full rounded-lg" analyticsPage="standalone" />
    </div>
  );
}

import {Image} from "@rixl/media-react";

function AnalyticsImage() {
  return (
    <Image
      id="your-image-id"
      analyticsPage="profile"
      onRixlAnalytics={(e) => {
        console.log("Analytics event:", e.detail.event);
      }}
    />
  );
}

<script type="module">
  import "@rixl/media-lit/image";

  const image = document.querySelector("rixl-image");
  image.addEventListener("rixl-analytics", (e) => {
    console.log(e.detail.event);
  });
</script>

<rixl-image image-id="your-image-id" analytics-page="standalone"></rixl-image>

const galleryImages = [{id: "image-1"}, {id: "image-2"}, {id: "image-3"}, {id: "image-4"}];

function ImageGallery() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {galleryImages.map((image) => (
        <div key={image.id} className="aspect-square rounded-lg overflow-hidden">
          <Image id={image.id} className="w-full h-full object-cover hover:scale-105 transition-transform duration-300" />
        </div>
      ))}
    </div>
  );
}

function UserProfile() {
  return (
    <div className="flex items-center space-x-4">
      <div className="w-16 h-16 rounded-full overflow-hidden">
        <Image id="user-avatar-id" className="w-full h-full object-cover" />
      </div>
      <div>
        <h3 className="font-semibold">John Doe</h3>
        <p className="text-gray-600">Software Engineer</p>
      </div>
    </div>
  );
}