Payment method radio cards

<!--
  `VisaIcon`/`MastercardIcon` — те же инлайновые `<svg>`, что в оригинале
  (не через `IconPlaceholder`), перенесены буквально. `IconPlaceholder`
  у "Add new payment method" заменена инлайновым `<svg>` (lucide-react
  v0.545.0 "plus") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Field, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <RadioGroup default-value="visa" class="flex flex-col gap-3">
      <FieldLabel for="pay-visa" class="relative p-0!">
        <Field orientation="horizontal">
          <div class="absolute top-3 right-3">
            <RadioGroupItem value="visa" id="pay-visa" />
          </div>
          <FieldTitle class="flex flex-col items-start gap-4!">
            <div class="bg-background border-border flex size-10 items-center justify-center rounded-lg border p-1.5 shadow-xs shadow-black/5">
              <svg viewBox="0 0 24 24" fill="none" class="size-full">
                <path
                  d="M9.5 8L7 16H5L3 8H5L6.25 13.5L8 8H9.5ZM11 8H12.5V16H11V8ZM16.5 10.5C16.5 9.7 15.8 9.2 14.8 9.2C14 9.2 13.3 9.5 12.8 10L12 9C12.8 8.3 13.8 8 15 8C16.8 8 18 9 18 10.5C18 13.5 14 12.5 14 14.2C14 14.8 14.5 15 15.2 15C16 15 16.7 14.7 17.2 14.2L18 15.2C17.2 15.9 16.2 16.2 15 16.2C13.5 16.2 12.5 15.3 12.5 14C12.5 11.2 16.5 12 16.5 10.5ZM21 16H19.5L22 8H23.5L21 16Z"
                  fill="#1A1F71"
                />
              </svg>
            </div>
            <div class="flex flex-col items-start gap-0.5">
              <span class="text-sm font-medium">Visa ending in 4242</span>
              <span class="text-muted-foreground text-xs">Expires 12/26</span>
            </div>
          </FieldTitle>
        </Field>
      </FieldLabel>
      <FieldLabel for="pay-mc" class="relative p-0!">
        <Field orientation="horizontal">
          <div class="absolute top-3 right-3">
            <RadioGroupItem value="mastercard" id="pay-mc" />
          </div>
          <FieldTitle class="flex flex-col items-start gap-4!">
            <div class="bg-background border-border rounded-2xl flex size-10 items-center justify-center border p-1.5 shadow-xs shadow-black/5">
              <svg viewBox="0 0 24 24" fill="none" class="size-full">
                <circle cx="9" cy="12" r="5" fill="#EB001B" />
                <circle cx="15" cy="12" r="5" fill="#F79E1B" />
                <path
                  d="M12 15.5C13.2 14.5 14 13.3 14 12C14 10.7 13.2 9.5 12 8.5C10.8 9.5 10 10.7 10 12C10 13.3 10.8 14.5 12 15.5Z"
                  fill="#FF5F00"
                />
              </svg>
            </div>
            <div class="flex flex-col items-start gap-0.5">
              <span class="text-sm font-medium">Mastercard ending in 8888</span>
              <span class="text-muted-foreground text-xs">Expires 09/25</span>
            </div>
          </FieldTitle>
        </Field>
      </FieldLabel>
      <FieldLabel for="pay-new" class="relative p-0!">
        <Field orientation="horizontal" class="justify-center">
          <RadioGroupItem value="new" id="pay-new" class="absolute top-3 right-3" />
          <FieldTitle class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-plus size-4 opacity-60"
            >
              <path d="M5 12h14" />
              <path d="M12 5v14" />
            </svg>
            Add new payment method
          </FieldTitle>
        </Field>
      </FieldLabel>
    </RadioGroup>
  </div>
</template>