@props([
    'design' => [],
    'type' => 'debit',
    'name' => 'CARD HOLDER',
    'number' => '**** **** **** 0000',
    'expiry' => 'MM/YY',
    'network' => 'VISA',
    'showNetworkLogo' => true,
    'size' => 'md',
])

@php
    $design = is_array($design) ? $design : [];
    $showNetwork = $showNetworkLogo !== false && !empty($network);
@endphp

<div class="card-preview card-preview-{{ $size }}"
     style="--cp-from: {{ $design['gradient_from'] ?? '#0A5A49' }}; --cp-to: {{ $design['gradient_to'] ?? '#0D6B58' }}; --cp-text: {{ $design['text_color'] ?? '#ffffff' }}; --cp-accent: {{ $design['accent_color'] ?? '#138A6E' }}; --cp-chip: {{ $design['chip_color'] ?? '#d4af37' }};">
    <div class="card-preview-inner">
        <div class="card-preview-top">
            <span class="card-preview-bank">BANKING</span>
            @if($showNetwork)
                <span class="card-preview-network">{{ $network }}</span>
            @endif
        </div>
        <div class="card-preview-chip"></div>
        <p class="card-preview-number">{{ $number }}</p>
        <div class="card-preview-footer">
            <div class="card-preview-field">
                <span class="card-preview-label">Card Holder</span>
                <span class="card-preview-value">{{ $name }}</span>
            </div>
            <div class="card-preview-field card-preview-field-right">
                <span class="card-preview-label">Expires</span>
                <span class="card-preview-value">{{ $expiry }}</span>
            </div>
        </div>
    </div>
</div>