"use client";

import { FileText } from "lucide-react";
import { useState } from "react";
import { SidebarRail } from "@/components/premium/sidebar-blocks/sidebar-rail";

export function SidebarRailPreview() {
  const [title, setTitle] = useState("Launch direction");

  return (
    <SidebarRail
      onItemSelect={(item) => setTitle(item.label)}
      onCreate={() => setTitle("Untitled page")}
      workspaceHeader={<p className="truncate text-sm font-medium">{title}</p>}
    >
      <div className="mx-auto flex h-full max-w-xl flex-col justify-center pb-12">
        <div className="mb-6 flex items-center gap-2 text-xs text-muted-foreground">
          <FileText aria-hidden="true" className="size-4" />
          Private page
        </div>
        <h1 className="text-4xl font-medium tracking-tight">{title}</h1>
        <p className="mt-4 max-w-md text-sm leading-6 text-muted-foreground">
          A place for the early thoughts, useful references, and small decisions
          that move the work forward.
        </p>
        <div className="mt-9 divide-y divide-border rounded-2xl border border-border bg-background px-5">
          {[
            [
              "01",
              "Find the starting point",
              "Bring the notes and references together.",
            ],
            [
              "02",
              "Make room for the good ideas",
              "Keep the next step clear and close.",
            ],
            [
              "03",
              "Share when it feels ready",
              "A little progress is still progress.",
            ],
          ].map(([number, heading, description]) => (
            <div key={number} className="flex gap-4 py-5">
              <span className="pt-0.5 font-mono text-xs text-muted-foreground">
                {number}
              </span>
              <div>
                <p className="text-sm font-medium">{heading}</p>
                <p className="mt-1 text-xs leading-5 text-muted-foreground">
                  {description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </SidebarRail>
  );
}

"use client";

import { SidebarWorkspace } from "@/components/premium/sidebar-blocks";

export function SidebarWorkspacePreview() {
  return <SidebarWorkspace />;
}

"use client";

import { SidebarOffcanvas } from "@/components/premium/sidebar-blocks";

export function SidebarOffcanvasPreview() {
  return <SidebarOffcanvas />;
}