import {
  RadioField,
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/radio-group"

export function RadioGroupDemo() {
  return (
    <div className="grid gap-6">
      <RadioGroup
        defaultValue="monthly"
        description="Choose the cadence for generated invoices."
        label="Billing cadence"
        name="billing-cadence"
      >
        <RadioGroupItem
          value="monthly"
          label="Monthly"
          description="Send one invoice every calendar month."
        />
        <RadioGroupItem
          value="quarterly"
          label="Quarterly"
          description="Collect three months into a single invoice."
        />
        <RadioGroupItem
          disabled
          value="annual"
          label="Annual"
          description="Requires an active enterprise agreement."
        />
      </RadioGroup>

      <RadioGroup
        defaultValue="card"
        label="Payment method"
        name="payment-method"
        orientation="horizontal"
      >
        <RadioGroupItem value="card" label="Card" />
        <RadioGroupItem value="bank" label="Bank transfer" />
        <RadioGroupItem value="wallet" label="Wallet" />
      </RadioGroup>

      <div className="grid gap-3">
        <RadioField
          defaultChecked
          label="Use as default"
          name="default-method"
          value="default"
        />
        <RadioField
          controlPosition="end"
          description="Use the same account for refunds and future charges."
          label="Keep account on file"
          name="account-storage"
          value="stored"
        />
      </div>
    </div>
  )
}
