Setup Checklist

"use client";

import { FileText, Globe, Palette, Rocket } from "lucide-react";
import {
  SetupChecklist,
  SetupChecklistCard,
  SetupChecklistDescription,
  SetupChecklistHeader,
  SetupChecklistItem,
  SetupChecklistList,
  SetupChecklistProgress,
  SetupChecklistTitle,
} from "@/components/ui/setup-checklist";

export function SetupChecklistPreview() {
  return (
    <SetupChecklist
      defaultCompletedIds={["brand"]}
      onCompletedChange={(completedIds) => console.log(completedIds)}
    >
      <SetupChecklistCard>
        <SetupChecklistHeader>
          <SetupChecklistTitle>Onboarding Checklist</SetupChecklistTitle>
          <SetupChecklistDescription>
            Finish the remaining tasks to fully activate your workspace.
          </SetupChecklistDescription>
        </SetupChecklistHeader>
        <SetupChecklistList>
          <SetupChecklistItem
            description="Upload your logo and color palette so every page stays on-brand."
            icon={<Palette />}
            id="brand"
            title="Add Your Brand Assets"
          />
          <SetupChecklistItem
            description="Draft a landing page or post to start building your online presence."
            icon={<FileText />}
            id="content"
            title="Create Your First Page"
          />
          <SetupChecklistItem
            description="Link your domain name so visitors can find you at your own URL."
            icon={<Globe />}
            id="domain"
            title="Connect a Custom Domain"
          />
          <SetupChecklistItem
            description="Review your setup and make your workspace publicly available."
            icon={<Rocket />}
            id="launch"
            title="Publish and Go Live"
          />
        </SetupChecklistList>
      </SetupChecklistCard>
      <SetupChecklistProgress>Onboarding Progress</SetupChecklistProgress>
    </SetupChecklist>
  );
}