{{--
    Button Molecule - Luxury Edition (Atomic Composable v2.0)
    CTA button with ghost/outlined variants and pill shape
    Email-safe table-based structure with Outlook MSO conditionals

    Note: All design tokens auto-injected via View Composer
    Uses centralized variant and size definitions from config/emails.php

    Usage:
    @component('emails.molecules.button', [
        'href' => 'https://example.com',
        'variant' => 'ghost-primary',  // ghost-primary|ghost-secondary|ghost-success|ghost-danger|primary|secondary|success|danger
        'size' => 'medium'              // small|medium|large
    ])
        Button Text
    @endcomponent
--}}
@php
$variant = $variant ?? 'ghost-primary';  // Default to ghost (luxury style)
$size = $size ?? 'medium';

// Get variant config from centralized design tokens
$variantConfig = $buttonVariants[$variant] ?? $buttonVariants['ghost-primary'];
$sizeConfig = $buttonSizes[$size] ?? $buttonSizes['medium'];

// Resolve color references
$bgColor = $variantConfig['bg'];
$textColorKey = $variantConfig['text'];
$borderColorKey = $variantConfig['border'];

// Handle transparent background
$bg = $bgColor === 'transparent' ? 'transparent' : ($colors[$bgColor] ?? '#be8c3c');
$text = $colors[$textColorKey] ?? '#ffffff';

// Handle border
if ($borderColorKey === 'none') {
    $border = 'none';
} else {
    $borderColor = $colors[$borderColorKey] ?? '#be8c3c';
    $border = $borders['width-medium'] . ' solid ' . $borderColor;
}

// Get size values
$padding = $sizeConfig['padding'];
$fontSizeKey = $sizeConfig['font-size'];
$fontSize = $typography['sizes'][$fontSizeKey] ?? '15px';

// Check if ghost variant for MSO conditionals
$isGhost = str_starts_with($variant, 'ghost-');
@endphp

<table cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
    <tr>
        <td align="center">
            @if($isGhost)
            {{-- Ghost button: Outlook doesn't support transparent bg well, show border only --}}
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $href }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="50%" strokecolor="{{ $text }}" strokeweight="2px" fillcolor="none">
            <w:anchorlock/>
            <center style="color:{{ $text }};font-family:sans-serif;font-size:{{ $fontSize }};font-weight:600;">
            <![endif]-->
            <a href="{{ $href }}" style="background-color: {{ $bg }}; color: {{ $text }} !important; font-family: {{ $typography['font-family'] }}; font-size: {{ $fontSize }}; font-weight: {{ $typography['weights']['semibold'] }}; text-decoration: none; border-radius: {{ $borders['radius-full'] }}; border: {{ $border }}; padding: {{ $padding }}; display: inline-block; text-align: center; line-height: {{ $typography['line-heights']['normal'] }}; mso-padding-alt: 0; -webkit-text-size-adjust: none;">
                <span style="color: {{ $text }} !important; text-decoration: none;">{{ $slot }}</span>
            </a>
            <!--[if mso]>
            </center>
            </v:roundrect>
            <![endif]-->
            @else
            {{-- Solid button: Traditional MSO approach --}}
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $href }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="50%" stroke="f" fillcolor="{{ $bg }}">
            <w:anchorlock/>
            <center>
            <![endif]-->
            <a href="{{ $href }}" style="background-color: {{ $bg }}; color: {{ $text }} !important; font-family: {{ $typography['font-family'] }}; font-size: {{ $fontSize }}; font-weight: {{ $typography['weights']['semibold'] }}; text-decoration: none; border-radius: {{ $borders['radius-full'] }}; padding: {{ $padding }}; display: inline-block; text-align: center; line-height: {{ $typography['line-heights']['normal'] }}; mso-padding-alt: 0; -webkit-text-size-adjust: none;">
                <span style="color: {{ $text }} !important; text-decoration: none;">{{ $slot }}</span>
            </a>
            <!--[if mso]>
            </center>
            </v:roundrect>
            <![endif]-->
            @endif
        </td>
    </tr>
</table>