import React, { useEffect, useState } from 'react';
import { fetchEntries } from '../api';

export default function EntriesTable({ dataTypeId }) {
    const [entries, setEntries] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadEntries = async () => {
            try {
                const result = await fetchEntries(dataTypeId);
                setEntries(result);
            } catch (error) {
                console.error("Error fetching entries:", error);
            } finally {
                setLoading(false);
            }
        };
        loadEntries();
    }, [dataTypeId]);

    if (loading) return <div>Loading...</div>;
    if (!entries.length) return <div>No entries found.</div>;

    // Ambil header kolom dari key properti data entry pertama
    const headers = Object.keys(entries[0].data || {});

    return (
        <div className="overflow-x-auto">
            <table className="min-w-full border-collapse">
                <thead>
                    <tr>
                        {headers.map((header) => (
                            <th key={header} className="border px-4 py-2 bg-gray-200">
                                {header}
                            </th>
                        ))}
                    </tr>
                </thead>
                <tbody>
                    {entries.map((entry) => (
                        <tr key={entry.data_id}>
                            {headers.map((header) => (
                                <td key={header} className="border px-4 py-2">
                                    {entry.data[header]}
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}