onselect?.()}
onkeydown={(e) => {
if (!onselect) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onselect();
}
}}
class={[
'flex flex-col gap-3 rounded-xl border bg-surface-elevated p-4 sm:flex-row sm:items-center sm:gap-4',
isDefault ? 'border-brand-500/40 ring-1 ring-brand-500/15' : 'border-border',
onselect && 'cursor-pointer transition-colors hover:border-border-strong',
className
]}
>
{#if normalizedBrand === 'visa'}
VISA
{:else if normalizedBrand === 'mastercard'}
{:else if normalizedBrand === 'amex'}
AMEX
{:else if normalizedBrand === 'discover'}
DISC
{:else}
{/if}
•••• {last4}
{#if isDefault}
Default
{/if}
{#if expiry}
Expires {expiry}
{/if}
{#if onremove || onmakeDefault}
{#if onmakeDefault && !isDefault}
{/if}
{#if onremove}
{/if}
{/if}