@props([
    'points',            // kolekcja {x, y}
    'xLabel' => 'Q',
    'yLabel' => 'Y',
    'color'  => '#006876',
])

@php
    $w = 340; $h = 210; $padL = 40; $padR = 12; $padT = 12; $padB = 26;
    $plotW = $w - $padL - $padR; $plotH = $h - $padT - $padB;
    $xMax = max(0.0001, (float) $points->max('x'));
    $yMax = max(0.0001, (float) $points->max('y'));
    $sx = fn ($x) => $padL + ($x / $xMax) * $plotW;
    $sy = fn ($y) => $padT + $plotH - ($y / $yMax) * $plotH;
    $poly = $points->map(fn ($p) => round($sx($p->x), 1).','.round($sy($p->y), 1))->implode(' ');
@endphp

<svg viewBox="0 0 {{ $w }} {{ $h }}" class="w-full h-auto" xmlns="http://www.w3.org/2000/svg">
    {{-- osie --}}
    <line x1="{{ $padL }}" y1="{{ $padT }}" x2="{{ $padL }}" y2="{{ $padT + $plotH }}" stroke="#cbd5d6" stroke-width="1"/>
    <line x1="{{ $padL }}" y1="{{ $padT + $plotH }}" x2="{{ $padL + $plotW }}" y2="{{ $padT + $plotH }}" stroke="#cbd5d6" stroke-width="1"/>
    {{-- krzywa --}}
    <polyline points="{{ $poly }}" fill="none" stroke="{{ $color }}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    {{-- punkty --}}
    @foreach ($points as $p)
        <circle cx="{{ round($sx($p->x), 1) }}" cy="{{ round($sy($p->y), 1) }}" r="3" fill="{{ $color }}"/>
    @endforeach
    {{-- skrajne wartości osi --}}
    <text x="{{ $padL - 4 }}" y="{{ $padT + 6 }}" font-size="8" fill="#888" text-anchor="end">{{ rtrim(rtrim(number_format($yMax, 1, '.', ''), '0'), '.') }}</text>
    <text x="{{ $padL - 4 }}" y="{{ $padT + $plotH }}" font-size="8" fill="#888" text-anchor="end">0</text>
    <text x="{{ $padL + $plotW }}" y="{{ $padT + $plotH + 12 }}" font-size="8" fill="#888" text-anchor="end">{{ rtrim(rtrim(number_format($xMax, 2, '.', ''), '0'), '.') }}</text>
    {{-- etykiety osi --}}
    <text x="{{ $padL }}" y="{{ $padT - 3 }}" font-size="9" fill="#555">{{ $yLabel }}</text>
    <text x="{{ $padL + $plotW }}" y="{{ $h - 4 }}" font-size="9" fill="#555" text-anchor="end">{{ $xLabel }}</text>
</svg>