<?php
// components/Ui/VoucherMockup.php
namespace Components\Ui;

use Components\Base;

/**
 * Renders a physical voucher card mockup for coupon templates.
 */
class VoucherMockup extends Base
{
    /**
     * Render the voucher mockup
     *
     * @param string $amount
     * @param string $codeMain
     * @param string|null $code
     * @param string $restrictions
     * @param string $type Coupon type (F, P, S)
     * @return string
     */
    public static function render(string $amount, string $codeMain, ?string $code, string $restrictions = 'no restrictions', string $type = ''): string
    {
        $amountEsc = self::h($amount);
        $codeEsc = self::h($code);
        $codeMainEsc = self::h($codeMain);
        $restrictionsEsc = self::h($restrictions);

        $iconData = \Components\Models\Coupon::getIcon($type);
        $iconSvg = $iconData['svg'] ?? '';
        $colorToken = $iconData['color'] ?? 'gray';

        switch ($colorToken) {
            case 'green':
                $bgClass = 'bg-green-600/70';
                break;
            case 'orange':
                $bgClass = 'bg-orange-600/70';
                break;
            case 'blue':
                $bgClass = 'bg-blue-600/70';
                break;
            case 'brand':
                $bgClass = 'bg-brand-600/70';
                break;
            default:
                $bgClass = 'bg-gray-600/70';
                break;
        }

        ob_start();
        ?>
        <div class="relative w-full h-full @container" style="container-type: inline-size;">
            <div class="relative flex flex-col justify-between overflow-hidden rounded-[2.5cqw] p-[5cqw] <?= $bgClass ?> bg-linear-to-tr from-black/20 via-transparent to-white/20 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset shadow-xs w-full h-full">
                <div class="relative flex items-start justify-between px-[1cqw] pt-[1cqw]">
                    <div class="text-[7cqw] leading-none font-semibold text-white"><?= $codeMainEsc ?></div>
                    <div class="text-white w-[12cqw] h-[12cqw] -mt-[2cqw] -mr-[1cqw] flex items-center justify-center [&>svg]:w-full [&>svg]:h-full [&>svg]:size-auto">
                        <?= $iconSvg ?>
                    </div>
                </div>
                <div class="relative flex items-end justify-between gap-[3cqw]">
                    <div class="flex min-w-0 flex-col gap-[2cqw]">
                        <div class="flex items-end gap-[1cqw]">
                            <p class="text-[5cqw] leading-snug font-semibold tracking-[0.2cqw] text-white" style="word-break: break-word;">
                                <?= $codeEsc ?>
<!--                                --><?php //= $restrictionsEsc ?>

                            </p>
                        </div>
                        <div class="text-[5cqw] leading-none font-semibold tracking-[0.3cqw] tabular-nums text-white"><?= $amountEsc ?></div>
                    </div>
<!--                    <div class="flex h-[10cqw] w-[14.5cqw] shrink-0 items-center justify-center rounded-[1.5cqw] bg-white/10"></div>-->
                </div>
            </div>
        </div>
            <?php
        return ob_get_clean();
    }
}
