Destructive switch with confirmation text

<script setup lang="ts">
import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldLabel for="sw-danger">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle class="text-destructive">
            Delete all data on sign out
          </FieldTitle>
          <FieldDescription>
            When enabled, all local data will be permanently removed when you
            sign out. This action cannot be undone.
          </FieldDescription>
        </FieldContent>
        <Switch id="sw-danger" class="data-checked:bg-destructive" />
      </Field>
    </FieldLabel>
  </div>
</template>