---
// src/components/PatternSystem.astro
interface Props {
  fillColor?: string;
}
const { fillColor = "text-white" } = Astro.props;
---

<svg 
  viewBox="0 0 200 60" 
  preserveAspectRatio="xMidYMid slice" 
  xmlns="http://www.w3.org/2000/svg" 
  class={`w-full h-full block ${fillColor} fill-current`}
>
  <g opacity="0.15">
    <path d="M 10,30 L 190,30" stroke="currentColor" stroke-width="1" />
    <path d="M 10,32 L 190,32" stroke="currentColor" stroke-width="0.5" stroke-dasharray="2 2" />
  </g>

  <g opacity="0.25">
    
    <rect x="20" y="20" width="25" height="20" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
    <text x="23" y="28" font-family="monospace" font-size="3" fill="currentColor">SEN</text>
    <path d="M 32.5,30 L 32.5,40" stroke="currentColor" stroke-width="0.5" />
    <circle cx="32.5" cy="30" r="1" fill="currentColor" />

    <rect x="65" y="15" width="30" height="30" rx="2" stroke="currentColor" stroke-width="1" fill="none" />
    <text x="70" y="25" font-family="monospace" font-size="4" font-weight="bold" fill="currentColor">MCU</text>
    <path d="M 65,30 L 95,30" stroke="currentColor" stroke-width="0.5" />
    <g opacity="0.5">
        <path d="M 70,30 L 70,15 M 75,30 L 75,15 M 80,30 L 80,15 M 85,30 L 85,15" stroke="currentColor" stroke-width="0.2" />
        <path d="M 70,30 L 70,45 M 75,30 L 75,45 M 80,30 L 80,45 M 85,30 L 85,45" stroke="currentColor" stroke-width="0.2" />
    </g>

    <rect x="115" y="22" width="20" height="16" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
    <text x="118" y="29" font-family="monospace" font-size="3" fill="currentColor">MEM</text>
    <path d="M 125,30 L 125,38" stroke="currentColor" stroke-width="0.5" />
    <circle cx="125" cy="30" r="1" fill="currentColor" />

    <rect x="155" y="18" width="25" height="24" rx="1" stroke="currentColor" stroke-width="0.5" fill="none" />
    <path d="M 175,22 L 175,12 M 172,15 L 175,12 L 178,15 M 170,18 L 175,12 L 180,18" stroke="currentColor" stroke-width="0.5" fill="none" />
    <text x="158" y="26" font-family="monospace" font-size="3" fill="currentColor">RF/LoRa</text>
    <path d="M 167.5,30 L 167.5,42" stroke="currentColor" stroke-width="0.5" />
    <circle cx="167.5" cy="30" r="1" fill="currentColor" />

  </g>
</svg>