Saved Views

"use client";

import SavedViews, { type SavedView } from "@/components/ui/saved-views";
import { useState } from "react";

const INITIAL_VIEWS: SavedView[] = [
  { id: "all", name: "All deals", count: 128, locked: true },
  { id: "open", name: "My open deals", count: 24, shared: true },
  { id: "churn", name: "Churn risk", count: 7 },
];

export default function SavedViewsDemo() {
  const [views, setViews] = useState<SavedView[]>(INITIAL_VIEWS);
  const [value, setValue] = useState("open");
  const [dirty, setDirty] = useState(true);

  return (
    <div className="w-full max-w-xl rounded-xl border bg-background p-5">
      <SavedViews
        views={views}
        value={value}
        onValueChange={(id) => {
          setValue(id);
          setDirty(false);
        }}
        dirty={dirty}
        onSave={() => setDirty(false)}
        onSaveAs={(name) => {
          const id =
            name.toLowerCase().replace(/\s+/g, "-") || `view-${views.length}`;
          setViews((prev) => [...prev, { id, name, count: 0 }]);
          setValue(id);
          setDirty(false);
        }}
        onDiscard={() => setDirty(false)}
        onDelete={(view) => {
          setViews((prev) => prev.filter((v) => v.id !== view.id));
          setValue("all");
          setDirty(false);
        }}
      />
    </div>
  );
}