@props(['context' => 'cart', 'appliedCode' => null, 'token' => null, 'tone' => 'light'])
@php
    if ($context === 'checkout' && $token) {
        $applyRoute = route('checkout.discount.apply', $token);
        $removeRoute = route('checkout.discount.apply', $token);
    } else {
        $applyRoute = route('cart.discount.apply');
        $removeRoute = route('cart.discount.remove');
    }
    $dark = $tone === 'dark';
@endphp
<div {{ $attributes->merge(['class' => $dark ? 'rounded border border-white/12 bg-white/[0.03] p-4 text-sm text-white' : 'rounded border border-black/10 bg-white p-4 text-sm']) }}>
    <div class="font-medium">Discount code</div>
    @error('code')<p class="mt-1 text-sm {{ $dark ? 'text-red-300' : 'text-red-700' }}">{{ $message }}</p>@enderror
    @if($appliedCode)
        <p class="mt-2">Applied: <span class="font-mono">{{ $appliedCode }}</span></p>
        @if($context === 'checkout')
            <form method="post" action="{{ $removeRoute }}" class="mt-2">@csrf<input type="hidden" name="code" value=""><button class="underline">Remove</button></form>
        @else
            <form method="post" action="{{ $removeRoute }}" class="mt-2">@csrf<button class="underline">Remove</button></form>
        @endif
    @else
        <form method="post" action="{{ $applyRoute }}" class="mt-2 flex flex-wrap gap-2">@csrf
            <input name="code" value="{{ old('code') }}" placeholder="Enter code" class="min-w-[10rem] flex-1 rounded px-3 py-2 font-mono {{ $dark ? 'border border-white/15 bg-black/35 text-white placeholder:text-white/30' : 'border border-black/15' }}">
            <button class="rounded px-3 py-2 {{ $dark ? 'border border-white/20 text-white hover:border-[var(--color-gold)] hover:text-[var(--color-gold)]' : 'border border-black/20' }}">Apply</button>
        </form>
    @endif
</div>