Animated list

import { Bell, X } from "lucide-react"
import { useRef, useState } from "react"
import { AnimatedList } from "@/components/ui/animated-list"
import { Button } from "@/components/ui/button"

const sampleNotifications = [
  { id: 1, title: "Export finished", when: "2 min ago" },
  { id: 2, title: "Invoice INV-0417 sent", when: "just now" },
  { id: 3, title: "Bank sync completed", when: "5 min ago" },
  { id: 4, title: "Teammate joined Forma Studio", when: "12 min ago" },
  { id: 5, title: "Payout scheduled", when: "Tomorrow" },
  { id: 6, title: "Rule retired: payouts", when: "1 h ago" },
];

export function AnimatedListDemo() {
  const [items, setItems] = useState(sampleNotifications.slice(0, 3));
  const next = useRef(3);
  const add = () => {
    const entry = { ...sampleNotifications[next.current % sampleNotifications.length]!, id: 100 + next.current };
    next.current += 1;
    setItems((list) => [entry, ...list]);
  };
  const shuffle = () => setItems((list) => [...list].sort(() => Math.random() - 0.5));
  return (
    <div className="grid w-full max-w-md gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm" onClick={add}>Add item</Button>
        <Button size="sm" variant="secondary" onClick={() => setItems((list) => list.slice(1))} disabled={items.length === 0}>Remove first</Button>
        <Button size="sm" variant="ghost" onClick={shuffle}>Shuffle</Button>
        <span className="text-xs text-muted-foreground" role="status">{items.length} {items.length === 1 ? "notification" : "notifications"}</span>
      </div>
      <AnimatedList aria-label="Notifications">
        {items.map((item) => (
          <div key={item.id} className="flex items-center gap-3 rounded-surface border border-border bg-elevated px-3 py-2.5">
            <Bell aria-hidden="true" className="size-4 text-muted-foreground" />
            <div className="min-w-0 flex-1">
              <p className="m-0 text-sm font-medium">{item.title}</p>
              <p className="m-0 text-xs text-muted-foreground">{item.when}</p>
            </div>
            <Button size="icon" variant="ghost" className="size-8" aria-label={`Dismiss ${item.title}`} onClick={() => setItems((list) => list.filter((entry) => entry.id !== item.id))}>
              <X aria-hidden="true" />
            </Button>
          </div>
        ))}
      </AnimatedList>
    </div>
  );
}