import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

interface TableModalProps {
    content: {
        columns: Array<{
            field: string;
            header: string;
        }>;
        data: Array<Record<string, any>>;
    };
}

const TableModal: React.FC<TableModalProps> = ({ content }) => {
    return (
        <div className="w-full h-full flex flex-col p-0">
            <style>{`
                .modal-table {
                    display: flex !important;
                    flex-direction: column !important;
                    height: auto !important;
                    margin: 0 !important;
                }
                .modal-table .p-datatable-wrapper {
                    min-height: 0 !important;
                    overflow: visible !important;
                }
                .modal-table .p-datatable-table {
                    width: 100% !important;
                    margin: 0 !important;
                    border-spacing: 0 !important;
                }
                .modal-table .p-datatable-thead {
                    position: sticky !important;
                    top: 0 !important;
                    z-index: 1 !important;
                    background: white !important;
                }
                .modal-table .p-datatable-thead > tr > th {
                    padding: 0.4rem !important;
                    background: #f8f9fa !important;
                    white-space: normal !important;
                    overflow: visible !important;
                }
                .modal-table .p-datatable-tbody > tr > td {
                    padding: 0.3rem 0.4rem !important;
                    line-height: 1 !important;
                    white-space: normal !important;
                    overflow: visible !important;
                }
                .modal-table .p-datatable-tbody > tr:hover {
                    background: #f8f9fa !important;
                }
                .p-paginator {
                    padding: 0.15rem !important;
                    margin: 0 !important;
                    border-width: 0 !important;
                    background: white !important;
                    border-top: 1px solid #dee2e6 !important;
                }
                .p-column-header-content {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: space-between !important;
                }
                .p-column-title {
                    font-weight: 600 !important;
                }
                .p-sortable-column-icon {
                    width: 0.75rem !important;
                    height: 0.75rem !important;
                }
                .p-datatable-tbody > tr:last-child > td {
                    border-bottom: none !important;
                }
                .p-datatable.p-datatable-gridlines {
                    display: flex !important;
                    flex-direction: column !important;
                    height: auto !important;
                    margin: 0 !important;
                }
                .p-paginator .p-paginator-pages .p-paginator-page {
                    min-width: 1.8rem !important;
                    height: 1.8rem !important;
                    margin: 0 0.1rem !important;
                }
                .p-paginator .p-paginator-first,
                .p-paginator .p-paginator-prev,
                .p-paginator .p-paginator-next,
                .p-paginator .p-paginator-last {
                    min-width: 1.8rem !important;
                    height: 1.8rem !important;
                    margin: 0 0.1rem !important;
                }
                .p-paginator .p-paginator-current {
                    margin: 0 0.3rem !important;
                    padding: 0 !important;
                }
            `}</style>
            <DataTable
                value={content.data}
                className="modal-table"
                scrollable={false}
                tableStyle={{ width: '100%', margin: 0 }}
                showGridlines
                stripedRows
                sortMode="multiple"
                removableSort
                resizableColumns
                columnResizeMode="fit"
                size="small"
                paginator
                rows={10}
                rowsPerPageOptions={[10]}
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            >
                {content.columns.map(col => (
                    <Column
                        key={col.field}
                        field={col.field}
                        header={col.header}
                        sortable
                        style={{
                            minWidth: '100px',
                            padding: '0.3rem 0.4rem',
                            whiteSpace: 'normal',
                            overflow: 'visible'
                        }}
                        headerStyle={{
                            fontWeight: 600,
                            padding: '0.4rem',
                            whiteSpace: 'normal',
                            overflow: 'visible'
                        }}
                    />
                ))}
            </DataTable>
        </div>
    );
};

export default TableModal; 