Checkbox card

"use client";

import { CheckboxCard } from "@waveinno/ui";
import { Camera, Receipt, Ticket, Zap } from "lucide-react";
import * as React from "react";

export default function CheckboxCardDemo() {
  const [addons, setAddons] = React.useState<string[]>(["plates"]);
  const all = [
    { id: "plates", icon: <Camera />, title: "Plate reading", description: "Cameras open the gate for passes", price: 900 },
    { id: "passes", icon: <Ticket />, title: "Monthly passes", description: "Tenants and staff, no ticket", price: 500 },
    { id: "receipts", icon: <Receipt />, title: "SMS receipts", description: "Every driver gets a receipt", price: 300 },
    { id: "priority", icon: <Zap />, title: "Priority support", description: "A person within 15 minutes", price: 1200 },
  ];
  const total = all.filter((a) => addons.includes(a.id)).reduce((s, a) => s + a.price, 0);
  return (
    <div>
      <div className="grid gap-2.5 sm:grid-cols-2">
        {all.map((a) => (
          <CheckboxCard
            key={a.id}
            icon={a.icon}
            title={a.title}
            description={a.description}
            aside={`৳${a.price}`}
            checked={addons.includes(a.id)}
            onCheckedChange={(on) => setAddons((x) => (on ? [...x, a.id] : x.filter((y) => y !== a.id)))}
          />
        ))}
      </div>
      <p className="mt-4 text-[13px] text-muted">
        Add-ons: <b className="num text-text">৳{total.toLocaleString("en-IN")}</b> a month per site
      </p>
    </div>
  );
}