@props(['points' => [], 'tooltips' => [], 'accent' => 'indigo'])

@php
    $w = 100;
    $h = 28;
    $pad = 3;
    $n = count($points);
    $max = $n ? max(array_merge($points, [0.0])) : 1.0;
    $min = $n ? min(array_merge($points, [0.0])) : 0.0;
    $range = ($max - $min) ?: 1.0;

    $coords = [];
    foreach ($points as $i => $v) {
        $x = $n > 1 ? ($i / ($n - 1)) * ($w - $pad * 2) + $pad : $w / 2;
        $y = $h - $pad - (($v - $min) / $range) * ($h - $pad * 2);
        $coords[] = [round($x, 2), round($y, 2)];
    }

    $pathD = '';
    foreach ($coords as $i => $point) {
        $pathD .= ($i === 0 ? 'M' : ' L').$point[0].','.$point[1];
    }

    $accentStroke = match ($accent) {
        'green' => 'stroke-green-600 dark:stroke-green-400',
        'gray' => 'stroke-gray-500 dark:stroke-gray-400',
        default => 'stroke-indigo-600 dark:stroke-indigo-400',
    };
    $accentFill = match ($accent) {
        'green' => 'fill-green-600 dark:fill-green-400',
        'gray' => 'fill-gray-500 dark:fill-gray-400',
        default => 'fill-indigo-600 dark:fill-indigo-400',
    };
@endphp

@if ($n > 1)
    <svg viewBox="0 0 {{ $w }} {{ $h }}" class="w-full h-7" preserveAspectRatio="none" role="img" aria-label="Trend over the last {{ $n }} days">
        <path d="{{ $pathD }}" fill="none" class="stroke-gray-300 dark:stroke-gray-600" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />
        <circle cx="{{ $coords[$n - 1][0] }}" cy="{{ $coords[$n - 1][1] }}" r="4" class="{{ $accentFill }}" />
        @foreach ($coords as $i => $point)
            <circle cx="{{ $point[0] }}" cy="{{ $point[1] }}" r="6" fill="transparent">
                @if (isset($tooltips[$i]))
                    <title>{{ $tooltips[$i] }}</title>
                @endif
            </circle>
        @endforeach
    </svg>
@endif