Pricing plan radio cards

<script setup lang="ts">
import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
</script>

<template>
  <RadioGroup default-value="pro" class="w-full max-w-xs">
    <FieldLabel for="free">
      <Field orientation="horizontal">
        <RadioGroupItem value="free" id="free" />
        <FieldContent>
          <FieldTitle class="flex items-center justify-between">
            <span>Free</span>
            <span class="text-sm font-semibold">$0/mo</span>
          </FieldTitle>
          <FieldDescription>For personal projects and experiments.</FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
    <FieldLabel for="pro">
      <Field orientation="horizontal">
        <RadioGroupItem value="pro" id="pro" />
        <FieldContent>
          <FieldTitle class="flex items-center justify-between">
            <span>Pro</span>
            <span class="text-sm font-semibold">$19/mo</span>
          </FieldTitle>
          <FieldDescription>For professionals and small teams.</FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
    <FieldLabel for="enterprise">
      <Field orientation="horizontal">
        <RadioGroupItem value="enterprise" id="enterprise" />
        <FieldContent>
          <FieldTitle class="flex items-center justify-between">
            <span>Enterprise</span>
            <span class="text-sm font-semibold">$49/mo</span>
          </FieldTitle>
          <FieldDescription>For organizations with advanced needs.</FieldDescription>
        </FieldContent>
      </Field>
    </FieldLabel>
  </RadioGroup>
</template>