"use client";

import { Modal } from "@/components/ui/modal";
import { cn } from "@/lib/utils";
import type { NoteCover } from "@/lib/notes/note-covers";

interface NoteDesignPreviewModalProps {
  cover: NoteCover | null;
  open: boolean;
  onClose: () => void;
}

// Mirrors the themed wrapper in notes/[id]/page.tsx (breadcrumb + title +
// glass editor) with placeholder content, so "preview" shows exactly what a
// real note using this design will look like before buying or applying it.
export function NoteDesignPreviewModal({ cover, open, onClose }: NoteDesignPreviewModalProps) {
  if (!cover) return null;

  const toneText = cover.tone === "light" ? "text-neutral-900" : "text-white";
  const toneMuted = cover.tone === "light" ? "text-neutral-900/55" : "text-white/55";

  return (
    <Modal open={open} onClose={onClose} title={cover.name} className="max-w-xl">
      <div className="overflow-hidden rounded-2xl" style={cover.style}>
        <div className="p-5 pb-6 sm:p-7 sm:pb-8">
          <div className={cn("mb-3 flex items-center gap-1 text-[12.5px]", toneMuted)}>
            <span>Notes</span>
            <span className="px-1">/</span>
            <span className={cn("font-medium", toneText)}>Untitled</span>
          </div>

          <p
            className={cn("mb-4 text-3xl font-bold tracking-tight", toneText)}
            style={cover.tone === "dark" ? { textShadow: "0 2px 16px rgba(0,0,0,0.35)" } : undefined}
          >
            My next big idea
          </p>

          <div
            className={cn(
              "flex flex-col gap-2 rounded-2xl p-4",
              "border border-white/15 bg-black/25 backdrop-blur-xl shadow-xl",
            )}
          >
            <div className="h-2.5 w-[85%] rounded-full bg-white/25" />
            <div className="h-2.5 w-[65%] rounded-full bg-white/20" />
            <div className="h-2.5 w-[72%] rounded-full bg-white/20" />
            <div className="mt-2 h-2.5 w-[40%] rounded-full bg-white/15" />
          </div>
        </div>
      </div>
    </Modal>
  );
}