---
// Door-hanger mark — a small brass "do not disturb" tag echoing Simone's
// luggage-tag motif. Decorative by default (aria-hidden); pass a `label` to
// expose it as an image with an accessible name. `size` sets the rendered px box.
interface Props {
  size?: number;
  label?: string;
  class?: string;
}
const { size = 28, label, class: className } = Astro.props;
---
<svg
  class={className}
  viewBox="0 0 64 64"
  width={size}
  height={size}
  role={label ? 'img' : undefined}
  aria-label={label}
  aria-hidden={label ? undefined : 'true'}
  focusable="false"
>
  <defs>
    <mask id="kh">
      <rect width="64" height="64" fill="#fff" />
      <circle cx="32" cy="18" r="5" fill="#000" />
      <rect x="29.6" y="3" width="4.8" height="15" rx="2.4" fill="#000" />
    </mask>
  </defs>
  <g mask="url(#kh)">
    <rect x="18" y="7" width="28" height="50" rx="7" fill="#F25C4D" />
  </g>
  <circle cx="32" cy="18" r="7.4" fill="none" stroke="#E7B765" stroke-width="1.4" />
  <rect x="25" y="33" width="14" height="2" rx="1" fill="#FBF8F2" opacity=".9" />
  <rect x="25" y="40" width="14" height="2" rx="1" fill="#FBF8F2" opacity=".9" />
</svg>