Activity feed

"use client";

import { ActivityFeed, Button, Card, Segmented } from "@waveinno/ui";
import { Users, Banknote, WifiOff } from "lucide-react";
import * as React from "react";

export default function FeedDemo() {
  const [variant, setVariant] = React.useState<"list" | "cards" | "compact">("cards");
  const items = [
    { id: "1", tone: "danger" as const, icon: <WifiOff />, time: "6 min", title: "Gate 2 offline", detail: "No heartbeat for 6 minutes", action: <Button size="sm">Open</Button> },
    { id: "2", tone: "warning" as const, icon: <Banknote />, time: "22:10", title: "Cash shift unbalanced", detail: "৳350 short at Banani", action: <Button size="sm">Review</Button> },
    { id: "3", tone: "info" as const, icon: <Users />, time: "1 h", title: "3 monthly parkers to approve", detail: "Night pass · Gulshan", action: <Button size="sm">Approve</Button> },
  ];
  return (
    <div className="space-y-3">
      <Segmented value={variant} onChange={setVariant} size="md" options={[{ value: "list", label: "List" }, { value: "cards", label: "Cards" }, { value: "compact", label: "Compact" }]} />
      {variant === "list" ? (
        <Card>
          <ActivityFeed items={items} />
        </Card>
      ) : variant === "compact" ? (
        <Card className="max-w-md">
          <ActivityFeed items={items} variant="compact" />
        </Card>
      ) : (
        <ActivityFeed items={items} variant="cards" className="max-w-2xl" />
      )}
    </div>
  );
}