import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Button } from '../components/Button.jsx';
import { PageTransition } from '../components/PageTransition.jsx';
import '../print.css';

export default function PrintPage() {
  const { state } = useLocation();
  const items = state?.items || [];
  const navigate = useNavigate();
  const maxWidth = items.reduce((max, i) => Math.max(max, i.width), 0) || 100;

  return (
    <PageTransition>
      <div className="container py-4">
        <div className="no-print mb-4 flex gap-2">
          <Button variant="ghost" onClick={() => navigate('/generate')}>Terug</Button>
          <Button variant="primary" onClick={() => window.print()}>Print</Button>
        </div>
        <div className="a4-preview">
          <div className="print-grid" style={{ '--plate-width': `${maxWidth}mm` }}>
            {items.map((item, idx) => (
              <img
                key={idx}
                src={item.src}
                alt={`plate-${idx}`}
                className="plate"
                style={{ width: `${item.width}mm`, height: `${item.height}mm` }}
              />
            ))}
          </div>
        </div>
      </div>
    </PageTransition>
  );
}