PDF Thumbnail

import { PdfThumbnail } from "@/components/ui/pdf-thumbnail";

// A realistic A4 invoice page (280×396 ≈ 1/1.414) so the thumbnail reads as a
// real document, not a placeholder — the app swaps this for a pdf.js canvas.
const PAGE = `data:image/svg+xml,${encodeURIComponent(
  `<svg xmlns="http://www.w3.org/2000/svg" width="280" height="396" viewBox="0 0 280 396">
    <rect width="280" height="396" fill="#fff"/>
    <rect x="28" y="28" width="34" height="34" rx="6" fill="#1f1f1e"/>
    <text x="45" y="51" font-family="Georgia,serif" font-size="18" fill="#fff" text-anchor="middle">O</text>
    <text x="252" y="40" font-family="sans-serif" font-size="15" font-weight="600" fill="#1f1f1e" text-anchor="end">СЧЁТ</text>
    <text x="252" y="56" font-family="sans-serif" font-size="8" fill="#8a8a85" text-anchor="end">№ 2026-0612</text>
    <g fill="#d8d6d0">
      <rect x="28" y="84" width="80" height="6" rx="2"/>
      <rect x="28" y="96" width="120" height="6" rx="2"/>
      <rect x="180" y="84" width="72" height="6" rx="2"/>
      <rect x="196" y="96" width="56" height="6" rx="2"/>
    </g>
    <rect x="28" y="132" width="224" height="22" rx="3" fill="#f3f2ef"/>
    <g fill="#c7c5bf">
      <rect x="36" y="140" width="90" height="6" rx="2"/>
      <rect x="170" y="140" width="28" height="6" rx="2"/>
      <rect x="220" y="140" width="24" height="6" rx="2"/>
    </g>
    <g fill="#e2e0db">
      <rect x="36" y="170" width="120" height="6" rx="2"/><rect x="170" y="170" width="28" height="6" rx="2"/><rect x="220" y="170" width="24" height="6" rx="2"/>
      <rect x="36" y="192" width="104" height="6" rx="2"/><rect x="170" y="192" width="28" height="6" rx="2"/><rect x="220" y="192" width="24" height="6" rx="2"/>
      <rect x="36" y="214" width="132" height="6" rx="2"/><rect x="170" y="214" width="28" height="6" rx="2"/><rect x="220" y="214" width="24" height="6" rx="2"/>
      <rect x="36" y="236" width="96" height="6" rx="2"/><rect x="170" y="236" width="28" height="6" rx="2"/><rect x="220" y="236" width="24" height="6" rx="2"/>
    </g>
    <line x1="28" y1="262" x2="252" y2="262" stroke="#e2e0db" stroke-width="1"/>
    <rect x="150" y="276" width="60" height="7" rx="2" fill="#d8d6d0"/>
    <rect x="222" y="276" width="30" height="7" rx="2" fill="#1f1f1e"/>
    <rect x="150" y="294" width="44" height="7" rx="2" fill="#d8d6d0"/>
    <rect x="226" y="294" width="26" height="7" rx="2" fill="#1f1f1e"/>
    <g transform="rotate(-12 96 320)">
      <rect x="44" y="300" width="104" height="40" rx="6" fill="none" stroke="#7fb0e0" stroke-width="2.5"/>
      <text x="96" y="325" font-family="sans-serif" font-size="14" font-weight="700" fill="#7fb0e0" text-anchor="middle">ОПЛАЧЕНО</text>
    </g>
    <g fill="#ecebe7">
      <rect x="28" y="364" width="130" height="5" rx="2"/>
      <rect x="28" y="374" width="96" height="5" rx="2"/>
    </g>
  </svg>`,
)}`;

export default function Particle() {
  return (
    <div className="flex min-h-110 w-full items-center justify-center">
      <PdfThumbnail filename="Счёт.pdf" pages={3}>
        {/* App-side render — a pdf.js canvas or img. Here: a realistic page. */}
        <img alt="" className="block size-full object-cover" src={PAGE} />
      </PdfThumbnail>
    </div>
  );
}