import { Printer } from 'lucide-react';

/*
 * SFR-02 공통컴포넌트: 출력 버튼
 */

interface PrintButtonProps {
  /** 출력 대상 element ref 또는 window.print() 사용 */
  targetRef?: React.RefObject<HTMLElement | null>;
  label?: string;
  className?: string;
}

export function PrintButton({ targetRef, label = '출력', className = '' }: PrintButtonProps) {
  const handlePrint = () => {
    if (targetRef?.current) {
      const printWindow = window.open('', '_blank');
      if (!printWindow) return;
      printWindow.document.write(`
        <html>
          <head>
            <title>인쇄</title>
            <style>
              body { font-family: 'Pretendard', sans-serif; color: #1e293b; padding: 20px; }
              table { width: 100%; border-collapse: collapse; font-size: 11px; }
              th, td { border: 1px solid #cbd5e1; padding: 6px 8px; text-align: left; }
              th { background: #f1f5f9; font-weight: 600; }
              h1, h2, h3 { margin: 0 0 8px; }
              @media print { body { padding: 0; } }
            </style>
          </head>
          <body>${targetRef.current.innerHTML}</body>
        </html>
      `);
      printWindow.document.close();
      printWindow.print();
    } else {
      window.print();
    }
  };

  return (
    <button
      type="button"
      onClick={handlePrint}
      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[10px] font-medium bg-surface-overlay border border-border text-muted-foreground hover:text-heading hover:border-border transition-colors ${className}`}
    >
      <Printer className="w-3 h-3" />
      {label}
    </button>
  );
}
