// import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
// import { renderDocxAsync } from '@/lib/docxPreviewClient';
// import { detectPlaceholders } from '../lib/placeholderDetector';
// import { fillTemplate, RenderError } from '../lib/templateEngine';
// import { parseDataFile, type ParsedData } from '../lib/dataParser';
// import { docxBlobToPdfBlob } from '../lib/pdfExporter';
// import type {
//   DataRecord,
//   FillProgressEvent,
//   TemplatePlaceholder,
// } from '../lib/templateTypes';

// /**
//  * TemplateFiller
//  * --------------
//  * End-to-end workflow:
//  *   1. User uploads a DOCX template (layout preserved, any page size).
//  *   2. Component auto-detects {placeholders} and {#loops} inside it.
//  *   3. User uploads data (.xlsx / .csv / .json) OR fills the fields manually.
//  *   4. User previews the merged document in the browser.
//  *   5. User downloads as .docx or .pdf.
//  *
//  * Optional props (`externalDataRecord`, `compact`) integrate it into the Review tab.
//  */

// interface Props {
//   /** Optional callback fired every time a placeholder mapping changes. */
//   onMappingChange?: (mapping: DataRecord) => void;
//   /** Optional CSS class for the outer wrapper. */
//   className?: string;
//   /**
//    * When a .docx template is loaded, scalar/loop fields are merged with this record
//    * (e.g. data from the initiative draft on the Review tab).
//    */
//   externalDataRecord?: DataRecord | null;
//   /** Smaller heading when embedded inside Review panel. */
//   compact?: boolean;
// }

// export const TemplateFiller: React.FC<Props> = ({
//   onMappingChange,
//   className,
//   externalDataRecord,
//   compact = false,
// }) => {
//   // --- Uploaded files ----------------------------------------------------
//   const [templateBuffer, setTemplateBuffer] = useState<ArrayBuffer | null>(
//     null
//   );
//   const [templateName, setTemplateName] = useState<string>('');
//   const [placeholders, setPlaceholders] = useState<TemplatePlaceholder[]>([]);

//   const [parsedData, setParsedData] = useState<ParsedData | null>(null);
//   const [selectedRow, setSelectedRow] = useState<number>(0);

//   // --- Field mapping ------------------------------------------------------
//   // `mapping[fieldName]` = value (scalar) OR array of DataRecord (loop row).
//   // We keep scalars and loops in separate shapes for the form UI, then
//   // combine them when rendering.
//   const [scalarValues, setScalarValues] = useState<Record<string, string>>({});
//   const [loopRows, setLoopRows] = useState<Record<string, DataRecord[]>>({});

//   // --- Output state -------------------------------------------------------
//   const [progress, setProgress] = useState<FillProgressEvent | null>(null);
//   const [error, setError] = useState<string | null>(null);
//   const [lastDocxBlob, setLastDocxBlob] = useState<Blob | null>(null);
//   const [lastPdfBlob, setLastPdfBlob] = useState<Blob | null>(null);
//   const previewRef = useRef<HTMLDivElement>(null);
//   /** Latest mapping for merging external draft data without stale closures. */
//   const mappingRef = useRef({ scalarValues, loopRows });
//   mappingRef.current = { scalarValues, loopRows };

//   // -----------------------------------------------------------------------
//   // Merge draft-driven fields when placeholders exist and external data updates.
//   // -----------------------------------------------------------------------
//   useEffect(() => {
//     if (placeholders.length === 0 || !externalDataRecord) return;
//     const { scalarValues: s, loopRows: l } = mappingRef.current;
//     const merged = mergeExternalIntoMapping(
//       placeholders,
//       s,
//       l,
//       externalDataRecord,
//     );
//     setScalarValues(merged.scalars);
//     setLoopRows(merged.loops);
//   }, [externalDataRecord, placeholders]);

//   // -----------------------------------------------------------------------
//   // Template upload — parses and detects placeholders.
//   // -----------------------------------------------------------------------
//   const handleTemplateUpload = useCallback(
//     async (e: React.ChangeEvent<HTMLInputElement>) => {
//       const file = e.target.files?.[0];
//       if (!file) return;
//       setError(null);
//       setProgress({ phase: 'parsing-template' });
//       try {
//         const buf = await file.arrayBuffer();
//         const detected = await detectPlaceholders(buf);
//         setTemplateBuffer(buf);
//         setTemplateName(file.name);
//         setPlaceholders(detected);

//         // Seed empty state for every detected field.
//         const nextScalars: Record<string, string> = {};
//         const nextLoops: Record<string, DataRecord[]> = {};
//         for (const p of detected) {
//           if (p.kind === 'scalar') nextScalars[p.name] = '';
//           else
//             nextLoops[p.name] = [
//               Object.fromEntries((p.innerTags ?? []).map((t) => [t, ''])),
//             ];
//         }
//         setScalarValues(nextScalars);
//         setLoopRows(nextLoops);
//         setProgress(null);
//       } catch (err) {
//         setProgress({ phase: 'error', error: err as Error });
//         setError(
//           'Could not read template: ' +
//             ((err as Error).message || 'Unknown error')
//         );
//       }
//     },
//     []
//   );

//   const applyRecordToMapping = useCallback(
//     (record: DataRecord) => {
//       setScalarValues((prev) => {
//         const next = { ...prev };
//         for (const key of Object.keys(prev)) {
//           const v = record[key];
//           if (v != null && typeof v !== 'object') next[key] = String(v);
//         }
//         return next;
//       });
//       // If a column in the record is itself an array, drop it into loopRows.
//       setLoopRows((prev) => {
//         const next = { ...prev };
//         for (const key of Object.keys(prev)) {
//           const v = record[key];
//           if (Array.isArray(v)) next[key] = v as DataRecord[];
//         }
//         return next;
//       });
//     },
//     []
//   );

//   // -----------------------------------------------------------------------
//   // Data upload — parses and auto-fills matching scalar fields.
//   // -----------------------------------------------------------------------
//   const handleDataUpload = useCallback(
//     async (e: React.ChangeEvent<HTMLInputElement>) => {
//       const file = e.target.files?.[0];
//       if (!file) return;
//       setError(null);
//       setProgress({ phase: 'parsing-data' });
//       try {
//         const parsed = await parseDataFile(file);
//         setParsedData(parsed);
//         setSelectedRow(0);
//         applyRecordToMapping(parsed.records[0] ?? {});
//         setProgress(null);
//       } catch (err) {
//         setProgress({ phase: 'error', error: err as Error });
//         setError(
//           'Could not parse data: ' +
//             ((err as Error).message || 'Unknown error')
//         );
//       }
//     },
//     [applyRecordToMapping]
//   );

//   // -----------------------------------------------------------------------
//   // Build the final data record for docxtemplater.
//   // -----------------------------------------------------------------------
//   const currentMapping = useMemo<DataRecord>(() => {
//     const merged: DataRecord = { ...scalarValues };
//     for (const [k, rows] of Object.entries(loopRows)) merged[k] = rows;
//     return merged;
//   }, [scalarValues, loopRows]);

//   // Notify parent when mapping changes (for host-app integrations).
//   React.useEffect(() => {
//     onMappingChange?.(currentMapping);
//   }, [currentMapping, onMappingChange]);

//   // -----------------------------------------------------------------------
//   // Actions
//   // -----------------------------------------------------------------------
//   const runFill = useCallback(
//     async (alsoPdf: boolean) => {
//       if (!templateBuffer) return;
//       setError(null);
//       setLastDocxBlob(null);
//       setLastPdfBlob(null);
//       setProgress({ phase: 'rendering' });
//       try {
//         const docx = await fillTemplate(templateBuffer, currentMapping, {
//           preserveLineBreaks: true,
//         });
//         setLastDocxBlob(docx);

//         // Refresh preview.
//         if (previewRef.current) {
//           previewRef.current.innerHTML = '';
//           await renderDocxAsync(docx, previewRef.current, undefined, {
//             inWrapper: true,
//             breakPages: true,
//             experimental: true,
//           });
//         }

//         if (alsoPdf) {
//           const pdf = await docxBlobToPdfBlob(docx, {
//             onProgress: setProgress,
//           });
//           setLastPdfBlob(pdf);
//         }
//         setProgress({ phase: 'done' });
//       } catch (err) {
//         const e = err as RenderError;
//         setProgress({ phase: 'error', error: e });
//         const detailMsg = e.details
//           ?.map(
//             (d) =>
//               `• ${d.tag ?? d.id ?? 'unknown'}: ${d.explanation ?? 'error'}`
//           )
//           .join('\n');
//         setError(
//           (e.message || 'Rendering failed') +
//             (detailMsg ? '\n' + detailMsg : '')
//         );
//       }
//     },
//     [templateBuffer, currentMapping]
//   );

//   const downloadBlob = (blob: Blob, filename: string) => {
//     const url = URL.createObjectURL(blob);
//     const a = document.createElement('a');
//     a.href = url;
//     a.download = filename;
//     a.click();
//     setTimeout(() => URL.revokeObjectURL(url), 1000);
//   };

//   const baseName = templateName.replace(/\.docx$/i, '') || 'filled';

//   // -----------------------------------------------------------------------
//   // Render
//   // -----------------------------------------------------------------------
//   const scalarList = placeholders.filter((p) => p.kind === 'scalar');
//   const loopList = placeholders.filter((p) => p.kind === 'loop');

//   return (
//     <div
//       className={className}
//       style={compact ? { ...styles.root, ...styles.rootCompact } : styles.root}
//     >
//       <header style={styles.header}>
//         {compact ? (
//           <>
//             <h2 style={styles.h2Compact}>Mẫu Word (DOCX)</h2>
//             <p style={styles.subCompact}>
//               Tải file .docx có <code style={styles.code}>{'{placeholder}'}</code>, dữ liệu từ bản
//               nháp sẽ gợi ý sẵn các trường trùng tên. Xem trước, tải DOCX hoặc PDF.
//             </p>
//           </>
//         ) : (
//           <>
//             <h1 style={styles.h1}>Template Filler</h1>
//             <p style={styles.sub}>
//               Upload a DOCX template with <code style={styles.code}>{'{placeholders}'}</code>,
//               supply data, export as DOCX or PDF. Page layout is preserved exactly.
//             </p>
//           </>
//         )}
//       </header>

//       <section style={styles.section}>
//         <h2 style={styles.h2}>1. Template</h2>
//         <label style={styles.fileBtn}>
//           <input
//             type="file"
//             accept=".docx"
//             onChange={handleTemplateUpload}
//             style={styles.fileInput}
//           />
//           {templateName ? `✓ ${templateName}` : 'Choose .docx template…'}
//         </label>
//         {placeholders.length > 0 && (
//           <p style={styles.note}>
//             Detected {scalarList.length} field
//             {scalarList.length === 1 ? '' : 's'}
//             {loopList.length > 0
//               ? ` and ${loopList.length} repeating block${loopList.length === 1 ? '' : 's'}`
//               : ''}
//             .
//           </p>
//         )}
//       </section>

//       <section style={styles.section}>
//         <h2 style={styles.h2}>2. Data source (optional)</h2>
//         {compact ? (
//           <p style={styles.mergeNote}>
//             Phần điền sẵn lấy từ dữ liệu xem lại trên tab này, theo cấu trúc{' '}
//             <code style={styles.code}>bieu_mau_sang_kien_template.json</code> (TRANG BÌA, Mẫu 01–03). Các
//             trường khớp tên placeholder trong file .docx sẽ được ghép tự động; bạn có thể chỉnh thêm ở
//             bước 3.
//           </p>
//         ) : (
//           <>
//             <label style={styles.fileBtn}>
//               <input
//                 type="file"
//                 accept=".xlsx,.xls,.csv,.json"
//                 onChange={handleDataUpload}
//                 style={styles.fileInput}
//               />
//               {parsedData
//                 ? `✓ ${parsedData.records.length} record${parsedData.records.length === 1 ? '' : 's'} loaded (${parsedData.format})`
//                 : 'Choose .xlsx / .csv / .json…'}
//             </label>
//             {parsedData && parsedData.records.length > 1 && (
//               <label style={styles.rowPicker}>
//                 Row:&nbsp;
//                 <select
//                   value={selectedRow}
//                   onChange={(e) => {
//                     const i = Number(e.target.value);
//                     setSelectedRow(i);
//                     applyRecordToMapping(parsedData.records[i]);
//                   }}
//                 >
//                   {parsedData.records.map((_, i) => (
//                     <option key={i} value={i}>
//                       Row {i + 1}
//                     </option>
//                   ))}
//                 </select>
//               </label>
//             )}
//           </>
//         )}
//       </section>

//       {/* {placeholders.length > 0 && (
//         <section style={styles.section}>
//           <h2 style={styles.h2}>3. Fields</h2>

//           {scalarList.length > 0 && (
//             <div style={styles.fieldGrid}>
//               {scalarList.map((p) => (
//                 <label key={p.name} style={styles.field}>
//                   <span style={styles.fieldLabel}>{p.name}</span>
//                   <textarea
//                     value={scalarValues[p.name] ?? ''}
//                     onChange={(e) =>
//                       setScalarValues((prev) => ({
//                         ...prev,
//                         [p.name]: e.target.value,
//                       }))
//                     }
//                     rows={2}
//                     style={styles.textarea}
//                     placeholder={`Value for {${p.name}}`}
//                   />
//                 </label>
//               ))}
//             </div>
//           )}

//           {loopList.map((loop) => (
//             <LoopEditor
//               key={loop.name}
//               placeholder={loop}
//               rows={loopRows[loop.name] ?? []}
//               onChange={(rows) =>
//                 setLoopRows((prev) => ({ ...prev, [loop.name]: rows }))
//               }
//             />
//           ))}
//         </section>
//       )} */}

//       <section style={styles.section}>
//         <h2 style={styles.h2}>4. Generate</h2>
//         <div style={styles.buttonRow}>
//           <button
//             onClick={() => runFill(false)}
//             disabled={!templateBuffer || progress?.phase === 'rendering'}
//             style={styles.btnPrimary}
//           >
//             Fill & Preview
//           </button>
//           <button
//             onClick={() => runFill(true)}
//             disabled={!templateBuffer || progress?.phase === 'rendering'}
//             style={styles.btnPrimary}
//           >
//             Fill & Export PDF
//           </button>
//           <button
//             onClick={() =>
//               lastDocxBlob && downloadBlob(lastDocxBlob, `${baseName}-filled.docx`)
//             }
//             disabled={!lastDocxBlob}
//             style={styles.btnSecondary}
//           >
//             Download DOCX
//           </button>
//           <button
//             onClick={() =>
//               lastPdfBlob && downloadBlob(lastPdfBlob, `${baseName}-filled.pdf`)
//             }
//             disabled={!lastPdfBlob}
//             style={styles.btnSecondary}
//           >
//             Download PDF
//           </button>
//         </div>
//         {progress && progress.phase !== 'done' && progress.phase !== 'error' && (
//           <p style={styles.progress}>
//             {phaseLabel(progress)}
//           </p>
//         )}
//         {error && (
//           <pre style={styles.error}>{error}</pre>
//         )}
//       </section>

//       <section style={styles.section}>
//         <h2 style={styles.h2}>Preview</h2>
//         <div ref={previewRef} style={styles.preview} />
//       </section>
//     </div>
//   );
// };

// // ---------------------------------------------------------------------------
// // Loop-block editor (for {#authors}…{/authors}).
// // ---------------------------------------------------------------------------
// const LoopEditor: React.FC<{
//   placeholder: TemplatePlaceholder;
//   rows: DataRecord[];
//   onChange: (rows: DataRecord[]) => void;
// }> = ({ placeholder, rows, onChange }) => {
//   const cols = placeholder.innerTags ?? [];

//   const updateCell = (rowIdx: number, col: string, value: string) => {
//     const next = rows.map((r, i) =>
//       i === rowIdx ? { ...r, [col]: value } : r
//     );
//     onChange(next);
//   };

//   return (
//     <div style={styles.loopBlock}>
//       <header style={styles.loopHeader}>
//         <strong>{`{#${placeholder.name}} … {/${placeholder.name}}`}</strong>
//         <span style={styles.loopHint}>
//           {cols.length} inner field{cols.length === 1 ? '' : 's'} · {rows.length} row
//           {rows.length === 1 ? '' : 's'}
//         </span>
//       </header>
//       <div style={{ overflowX: 'auto' }}>
//         <table style={styles.loopTable}>
//           <thead>
//             <tr>
//               <th style={styles.loopCell}>#</th>
//               {cols.map((c) => (
//                 <th key={c} style={styles.loopCell}>
//                   {c}
//                 </th>
//               ))}
//               <th style={styles.loopCell}></th>
//             </tr>
//           </thead>
//           <tbody>
//             {rows.map((row, i) => (
//               <tr key={i}>
//                 <td style={styles.loopCell}>{i + 1}</td>
//                 {cols.map((c) => (
//                   <td key={c} style={styles.loopCell}>
//                     <input
//                       type="text"
//                       value={String(row[c] ?? '')}
//                       onChange={(e) => updateCell(i, c, e.target.value)}
//                       style={styles.loopInput}
//                     />
//                   </td>
//                 ))}
//                 <td style={styles.loopCell}>
//                   <button
//                     onClick={() => onChange(rows.filter((_, j) => j !== i))}
//                     style={styles.btnRemove}
//                     aria-label="Remove row"
//                   >
//                     ×
//                   </button>
//                 </td>
//               </tr>
//             ))}
//           </tbody>
//         </table>
//       </div>
//       <button
//         onClick={() =>
//           onChange([
//             ...rows,
//             Object.fromEntries(cols.map((c) => [c, ''])),
//           ])
//         }
//         style={styles.btnAddRow}
//       >
//         + Add row
//       </button>
//     </div>
//   );
// };

// // ---------------------------------------------------------------------------
// // Helpers
// // ---------------------------------------------------------------------------
// /**
//  * Applies keys from `external` onto scalar/loop state for placeholders that exist
//  * in the template. Scalar values must be primitives; loop values must be arrays of rows.
//  */
// function mergeExternalIntoMapping(
//   placeholders: TemplatePlaceholder[],
//   scalars: Record<string, string>,
//   loops: Record<string, DataRecord[]>,
//   external: DataRecord,
// ): { scalars: Record<string, string>; loops: Record<string, DataRecord[]> } {
//   const nextScalars = { ...scalars };
//   const nextLoops = { ...loops };

//   for (const p of placeholders) {
//     if (p.kind === 'scalar') {
//       const v = external[p.name];
//       if (v != null && typeof v !== 'object' && !Array.isArray(v)) {
//         nextScalars[p.name] = String(v);
//       }
//     } else {
//       const v = external[p.name];
//       const inner = p.innerTags ?? [];
//       if (Array.isArray(v) && v.length > 0) {
//         nextLoops[p.name] = (v as DataRecord[]).map((row) => {
//           const out: DataRecord = {};
//           for (const t of inner) {
//             const cell = row[t];
//             out[t] =
//               cell != null &&
//               (typeof cell === 'string' ||
//                 typeof cell === 'number' ||
//                 typeof cell === 'boolean')
//                 ? String(cell)
//                 : '';
//           }
//           return out;
//         });
//       }
//     }
//   }
//   return { scalars: nextScalars, loops: nextLoops };
// }

// function phaseLabel(p: FillProgressEvent): string {
//   switch (p.phase) {
//     case 'parsing-template':
//       return 'Reading template…';
//     case 'parsing-data':
//       return 'Parsing data…';
//     case 'rendering':
//       return 'Filling template…';
//     case 'converting-to-pdf':
//       return p.totalPages
//         ? `Rendering PDF page ${p.page}/${p.totalPages}…`
//         : 'Rendering PDF…';
//     default:
//       return '';
//   }
// }

// // Inline styles keep this component framework-free (no Tailwind / CSS module
// // dependency). Swap for your own system when integrating.
// const styles: Record<string, React.CSSProperties> = {
//   root: {
//     fontFamily:
//       '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
//     color: '#1f2330',
//     maxWidth: 1040,
//     margin: '0 auto',
//     padding: 24,
//   },
//   rootCompact: {
//     maxWidth: 'none',
//     margin: 0,
//     padding: 0,
//   },
//   header: { marginBottom: 16 },
//   h1: { margin: 0, fontSize: 28, fontWeight: 600 },
//   h2Compact: { margin: 0, fontSize: 18, fontWeight: 600, color: '#2e3144' },
//   subCompact: { margin: '6px 0 0', color: '#5a5f72', fontSize: 13, lineHeight: 1.45 },
//   h2: { margin: '0 0 12px', fontSize: 16, fontWeight: 600, color: '#2e3144' },
//   sub: { margin: '8px 0 0', color: '#5a5f72', fontSize: 14 },
//   code: {
//     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
//     background: '#eef0f5',
//     padding: '1px 6px',
//     borderRadius: 4,
//     fontSize: 13,
//   },
//   section: {
//     border: '1px solid #e4e6ef',
//     borderRadius: 10,
//     padding: 16,
//     marginBottom: 16,
//     background: '#fff',
//   },
//   fileBtn: {
//     display: 'inline-block',
//     padding: '10px 14px',
//     background: '#f4f5fa',
//     border: '1px dashed #c3c7d5',
//     borderRadius: 8,
//     cursor: 'pointer',
//     fontSize: 14,
//   },
//   fileInput: { display: 'none' },
//   note: { margin: '10px 0 0', color: '#5a5f72', fontSize: 13 },
//   mergeNote: { margin: 0, color: '#5a5f72', fontSize: 13, lineHeight: 1.45 },
//   rowPicker: { marginLeft: 14, fontSize: 14 },
//   fieldGrid: {
//     display: 'grid',
//     gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
//     gap: 12,
//   },
//   field: { display: 'flex', flexDirection: 'column', gap: 4 },
//   fieldLabel: {
//     fontSize: 12,
//     fontWeight: 600,
//     color: '#2e3144',
//     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
//   },
//   textarea: {
//     border: '1px solid #d6d9e4',
//     borderRadius: 6,
//     padding: '8px 10px',
//     fontSize: 13,
//     fontFamily: 'inherit',
//     resize: 'vertical',
//     minHeight: 40,
//   },
//   buttonRow: { display: 'flex', flexWrap: 'wrap', gap: 10 },
//   btnPrimary: {
//     padding: '9px 16px',
//     background: '#2b4de0',
//     color: '#fff',
//     border: 0,
//     borderRadius: 8,
//     fontSize: 14,
//     fontWeight: 500,
//     cursor: 'pointer',
//   },
//   btnSecondary: {
//     padding: '9px 16px',
//     background: '#fff',
//     color: '#2b4de0',
//     border: '1px solid #2b4de0',
//     borderRadius: 8,
//     fontSize: 14,
//     fontWeight: 500,
//     cursor: 'pointer',
//   },
//   progress: { marginTop: 10, color: '#5a5f72', fontSize: 13 },
//   error: {
//     marginTop: 10,
//     padding: 12,
//     background: '#fff3f3',
//     border: '1px solid #f5b5b5',
//     color: '#b02020',
//     borderRadius: 6,
//     fontSize: 13,
//     whiteSpace: 'pre-wrap',
//   },
//   preview: {
//     minHeight: 300,
//     background: '#eef0f5',
//     border: '1px solid #d6d9e4',
//     borderRadius: 8,
//     padding: 12,
//     overflow: 'auto',
//     maxHeight: 800,
//   },
//   loopBlock: {
//     marginTop: 14,
//     padding: 12,
//     background: '#fafbfe',
//     border: '1px solid #e4e6ef',
//     borderRadius: 8,
//   },
//   loopHeader: {
//     display: 'flex',
//     justifyContent: 'space-between',
//     alignItems: 'center',
//     marginBottom: 8,
//     fontSize: 13,
//     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
//   },
//   loopHint: { color: '#7a7f92', fontSize: 12 },
//   loopTable: { borderCollapse: 'collapse', width: '100%', fontSize: 13 },
//   loopCell: {
//     border: '1px solid #e4e6ef',
//     padding: '4px 6px',
//     textAlign: 'left',
//     verticalAlign: 'top',
//   },
//   loopInput: {
//     width: '100%',
//     border: 0,
//     padding: 4,
//     fontSize: 13,
//     background: 'transparent',
//     fontFamily: 'inherit',
//   },
//   btnAddRow: {
//     marginTop: 8,
//     padding: '6px 12px',
//     background: '#fff',
//     border: '1px solid #c3c7d5',
//     borderRadius: 6,
//     cursor: 'pointer',
//     fontSize: 13,
//   },
//   btnRemove: {
//     background: 'transparent',
//     border: 0,
//     color: '#b02020',
//     cursor: 'pointer',
//     fontSize: 16,
//     lineHeight: 1,
//   },
// };

// export default TemplateFiller;
