@props(['title' => 'title component', 'visible_data' => false, 'data_count' => '', 'visible_data_type' => false, 
'data_type' => '','style' => '', 'size' => '', 'line' => [], 'data_id' => ''])

@section('css')
@vite(['resources/scss/components/_custom_circle.scss'])
@endsection

<div class="custom-circle-wrapper {{ $size }}" style="{{ $style }}">
    <div class="custom-circle-content">
        <p class="custom-circle-text">{{ $title }}</p>
        @if ($visible_data === "true")
            <div class="custom-circle-data" id="{{ $data_id }}">{{ $data_count }}</div>
        @endif
        @if ($visible_data_type === "true")
            <div class="custom-circle-data-type">{{ $data_type }}</div>
        @endif
        @if (!empty($lines))
            <svg class="absolute w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                @foreach ($lines as $line)
                    <line 
                        x1="{{ $line['x1'] }}" y1="{{ $line['y1'] }}" 
                        x2="{{ $line['x2'] }}" y2="{{ $line['y2'] }}" 
                        stroke="{{ $line['color'] ?? 'black' }}" 
                        stroke-width="{{ $line['width'] ?? 2 }}"
                    />
                @endforeach
            </svg>
        @endif
    </div>
</div>