Switch with tooltip info

<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
</script>

<template>
  <div class="flex items-center justify-center">
    <Field orientation="horizontal">
      <Switch id="sw-tooltip" />
      <div class="flex items-center gap-1.5">
        <FieldLabel for="sw-tooltip">
          Two-factor authentication
        </FieldLabel>
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger class="text-muted-foreground">
              <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"
                class="lucide lucide-circle-help size-3.5"
                aria-hidden="true"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
                <path d="M12 17h.01" />
              </svg>
            </TooltipTrigger>
            <TooltipContent side="right">
              Adds an extra layer of security by requiring a verification code
              on login.
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
    </Field>
  </div>
</template>