import React from "react";
import {
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Paper
} from "@mui/material";

interface KeyValueTableProps {
    data: Record<string, React.ReactNode>;
}

/**
 * A simple Material UI table component that displays key-value pairs in a table format.
 * Keys are displayed as column headers, and values are displayed in a single row below.
 */
export const KeyValueTable: React.FC<KeyValueTableProps> = ({ data }) => {
    const entries = Object.entries(data);
    
    if (entries.length === 0) return null;
    
    return (
        <TableContainer component={Paper} sx={{ mb: 2 }}>
            <Table size="small">
                <TableHead>
                    <TableRow>
                        {entries.map(([key]) => (
                            <TableCell key={key} align="center" sx={{ fontWeight: 'bold' }}>
                                {key}
                            </TableCell>
                        ))}
                    </TableRow>
                </TableHead>
                <TableBody>
                    <TableRow>
                        {entries.map(([key, value]) => (
                            <TableCell key={key} align="center">
                                {value || '-'}
                            </TableCell>
                        ))}
                    </TableRow>
                </TableBody>
            </Table>
        </TableContainer>
    );
};