@include('emails.partials.brand-colors')
{{--
    Email Button Component

    Usage:
    @component('emails.components.button', ['href' => 'https://example.com', 'variant' => 'primary'])
        Click Me
    @endcomponent

    Props:
    - href: Link URL (required)
    - variant: 'primary', 'secondary', 'success', 'danger' (default: 'primary')
    - size: 'small', 'medium', 'large' (default: 'medium')
    - align: 'left', 'center', 'right' (default: 'center')
--}}

@php
$href = $href ?? '#';
$variant = $variant ?? 'primary';
$size = $size ?? 'medium';
$align = $align ?? 'center';

// Button variant styles
$variantStyles = [
    'primary' => "background-color: {$colors['btn-primary-bg']}; color: #ffffff;",
    'secondary' => "background-color: {$colors['btn-secondary-bg']}; color: #ffffff;",
    'success' => "background-color: {$colors['jade']}; color: #ffffff;",
    'danger' => "background-color: {$colors['carnelian']}; color: #ffffff;",
    'outline' => "background-color: transparent; color: {$colors['btn-primary-bg']}; border: 2px solid {$colors['btn-primary-bg']};",
];

// Button sizes
$sizeStyles = [
    'small' => 'padding: 10px 24px; font-size: 14px;',
    'medium' => 'padding: 14px 32px; font-size: 16px;',
    'large' => 'padding: 18px 40px; font-size: 18px;',
];

$buttonStyle = ($variantStyles[$variant] ?? $variantStyles['primary']) . ' ' . ($sizeStyles[$size] ?? $sizeStyles['medium']);
@endphp

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 24px 0;">
    <tr>
        <td align="{{ $align }}">
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $href }}" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="{{ $colors['btn-primary-bg'] }}" fillcolor="{{ $colors['btn-primary-bg'] }}">
                <w:anchorlock/>
                <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">{{ $slot }}</center>
            </v:roundrect>
            <![endif]-->
            <!--[if !mso]><!-->
            <a href="{{ $href }}"
               style="display: inline-block; {{ $buttonStyle }} text-decoration: none; font-weight: 600;
                      border-radius: 6px; text-align: center; min-width: 160px;
                      box-shadow: 0 2px 8px rgba(235, 148, 37, 0.25); letter-spacing: 0.01em;">
                {{ $slot }}
            </a>
            <!--<![endif]-->
        </td>
    </tr>
</table>