Radio group and Radio card

"use client";

import { RadioCard, RadioGroup, RadioGroupItem } from "@waveinno/ui";
import { Banknote, Bike, Car, CreditCard, Smartphone, Truck } from "lucide-react";
import * as React from "react";

export default function RadioDemo() {
  const [method, setMethod] = React.useState("bkash");
  return (
    <div className="grid gap-8 lg:grid-cols-[220px_1fr]">
      <div className="space-y-6">
        <RadioGroup defaultValue="hourly" aria-label="Billing">
          <RadioGroupItem value="hourly" label="Hourly" description="৳30 for the first hour" />
          <RadioGroupItem value="daily" label="Daily cap" description="Never more than ৳300" />
          <RadioGroupItem value="monthly" label="Monthly pass" disabled description="On the Pro plan" />
        </RadioGroup>
        <RadioGroup defaultValue="car" orientation="horizontal" aria-label="Vehicle">
          <RadioGroupItem value="car" label="Car" />
          <RadioGroupItem value="bike" label="Bike" />
          <RadioGroupItem value="truck" label="Truck" />
        </RadioGroup>
      </div>
      <div className="space-y-5">
        <RadioGroup value={method} onValueChange={setMethod} className="grid gap-2.5 sm:grid-cols-2" aria-label="Payment method">
          <RadioCard value="bkash" icon={<Smartphone />} title="bKash" description="Pay from your wallet, no fee" aside="৳450" />
          <RadioCard value="card" icon={<CreditCard />} title="Card" description="Visa, Mastercard, Amex · 1.5% fee" aside="৳457" />
          <RadioCard value="cash" icon={<Banknote />} title="Cash at the gate" description="Pay the attendant on the way out" aside="৳450" />
          <RadioCard value="nagad" icon={<Smartphone />} title="Nagad" description="Coming in November" aside="—" disabled />
        </RadioGroup>
        <RadioGroup defaultValue="car" className="grid grid-cols-3 gap-2.5" aria-label="Vehicle type">
          <RadioCard value="car" icon={<Car />} title="Car" description="Up to 5 m" />
          <RadioCard value="bike" icon={<Bike />} title="Bike" description="Any size" />
          <RadioCard value="truck" icon={<Truck />} title="Truck" description="Bay 3 only" />
        </RadioGroup>
      </div>
    </div>
  );
}