Payment method card checkbox

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel, FieldTitle } from "@/components/ui/field"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldLabel for="mastercard" class="relative p-0!">
      <Field orientation="horizontal">
        <Checkbox id="mastercard" :default-value="true" class="absolute top-3 right-3 size-5 rounded-full" />
        <FieldTitle class="flex flex-col items-start gap-4!">
          <div class="bg-background border-border rounded-lg flex size-10 items-center justify-center border p-1.5 shadow-xs shadow-black/5">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-full">
              <circle cx="7" cy="12" r="7" fill="#EB001B" />
              <circle cx="17" cy="12" r="7" fill="#F79E1B" />
              <path
                d="M12 17.5C13.5 16.2 14.5 14.2 14.5 12C14.5 9.8 13.5 7.8 12 6.5C10.5 7.8 9.5 9.8 9.5 12C9.5 14.2 10.5 16.2 12 17.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>
  </div>
</template>