@props([
    'url',
    'color' => 'primary',
    'align' => 'center',
])
@php
$colorMap = [
    'primary' => '#20a0da',
    'blue' => '#20a0da',
    'success' => '#22c55e',
    'green' => '#22c55e',
    'error' => '#dc2626',
    'red' => '#dc2626',
];
$bgColor = $colorMap[$color] ?? '#20a0da';
@endphp
<table class="action" role="presentation" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0;">
<tr>
<td align="{{ $align }}" style="padding: 0;">
<table role="presentation" width="auto" border="0" cellpadding="0" cellspacing="0" align="{{ $align }}">
<tr>
<td align="center" style="padding: 0;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $url }}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="{{ $bgColor }}">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;">
{!! $slot !!}
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="{{ $url }}" class="button button-{{ $color }}" target="_blank" rel="noopener" style="background-color: {{ $bgColor }}; border-top: 14px solid {{ $bgColor }}; border-bottom: 14px solid {{ $bgColor }}; border-left: 32px solid {{ $bgColor }}; border-right: 32px solid {{ $bgColor }}; color: #ffffff; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; -webkit-text-size-adjust: none; mso-hide: all;">{!! $slot !!}</a>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>