---
import logoLockupMask from '@images/tenantial-logo-lockup-mask.png';

const {
  class: className,
  style: inlineStyle,
  'aria-label': ariaLabel = 'Tenantial',
  ...attrs
} = Astro.props;

const logoMaskUrl =
  typeof logoLockupMask === 'string' ? logoLockupMask : logoLockupMask.src;
const logoStyle = `--tenantial-logo-mask: url("${logoMaskUrl}");${inlineStyle ?? ''}`;
---

<span
  {...attrs}
  class:list={[
    'tenantial-wordmark inline-block shrink-0 align-middle text-neutral-700 transition-colors duration-300 dark:text-white',
    className,
  ]}
  style={logoStyle}
  role="img"
  aria-label={ariaLabel}
>
  <span class="tenantial-wordmark__shape" aria-hidden="true"></span>
</span>

<style>
  .tenantial-wordmark {
    color: #4b4b4f;
  }

  :global(.dark) .tenantial-wordmark,
  :global([data-theme='dark']) .tenantial-wordmark {
    color: #ffffff;
  }

  .tenantial-wordmark__shape {
    display: block;
    width: 100%;
    aspect-ratio: 898 / 167;
    background: currentColor;
    mask-image: var(--tenantial-logo-mask);
    mask-mode: alpha;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--tenantial-logo-mask);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }
</style>