---
type Props = {
    color: string
}

const { color } = Astro.props

const patternId = 'zig-zag-' + color.slice(1)
---

<div class="zig-zag">
    <svg
        width="100%"
        height="2rem"
        viewBox="0 0 1 1"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMinYMid meet"
    >
        <defs>
            <pattern id={patternId} x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                <path fill={color} d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
            </pattern>
        </defs>
        <rect fill={`url(#${patternId})`} x="0" y="0" width="1000" height="1"></rect>
    </svg>
</div>