---
import { Image } from 'astro:assets';

const { srcLight, srcDark, alt, style, width, height } = Astro.props;
---

<div class="themed-image-container">
  <Image
    src={srcLight}
    alt={alt}
    class={`light-logo ${style}`}
    inferSize={true}
    width={width}
    height={height}
    inferSize={true}
  />

  <Image
    src={srcDark}
    alt={alt}
    class={`dark-logo ${style}`}
    inferSize={true}
    width={width}
    height={height}
    inferSize={true}
  />
</div>

<style>
  .themed-image-container {
    display: grid;
    grid-template-areas: "stack";
  }

  .themed-image-container :global(img) {
    grid-area: stack;
  }

  :global(.dark) .light-logo {
    display: none !important;
  }

  :global(.dark) .dark-logo {
    display: block !important;
  }
</style>