import React, { useRef } from 'react';
import LayoutPrinter from 'react-layout-print';

// Example components for PDF layout sections
const SidePanel = ({ data }) => (
    <div style={{ fontSize: '12px', padding: '10px', fontFamily: 'sans-serif' }}>
        <h3>{data.title}</h3>
        <p><strong>Client:</strong> {data.clientName}</p>
        <p><strong>Location:</strong> {data.location}</p>
        <hr />
        <p><em>This is a custom side panel.</em></p>
    </div>
);

const FooterPanel = ({ data, logoUrl }) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '5px', fontFamily: 'sans-serif' }}>
        <p><strong>Notes:</strong> {data.notes}</p>
        {logoUrl && <img src={logoUrl} alt="logo" style={{ width: '80px' }} />}
    </div>
);

function MyPrintablePage() {
    const printableRef = useRef(null);

    const printData = {
        title: 'My Awesome Plan',
        clientName: 'ACME Corp',
        location: 'Mars',
        notes: 'All dimensions are in light-years.',
        facing: 'N', // For the compass
    };

    return (
        <div>
            <h1>React Layout Printer Example</h1>
            
            <div ref={printableRef} style={{ width: '800px', height: '600px', border: '2px dashed #ccc', padding: '1rem', background: 'white' }}>
                <h2>This is the content to be printed</h2>
                <p>It can be any React component or DOM structure.</p>
            </div>

            <LayoutPrinter
                elementRef={printableRef}
                data={printData}
                fileName="my-document"
                SidePanelComponent={SidePanel}
                FooterComponent={FooterPanel}
                logoUrl="https://via.placeholder.com/150"
            >
                <button>Print Document</button>
            </LayoutPrinter>
        </div>
    );
}

import React from 'react';
import ReactLayoutPrint from 'react-layout-print';

class MyComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h1>My Component</h1>
        <p>This is the content that will be printed.</p>
      </div>
    );
  }
}

export const Example = () => {
  const componentRef = React.useRef();

  return (
    <div>
      <ReactLayoutPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
      <MyComponentToPrint ref={componentRef} />
    </div>
  );
};