import { useDocuments } from '@/hooks/useDocuments';
import {DocumentObject} from '@ui/DocumentObject'
import { Card } from '../ui/Card';

export function DocumentsWidget(){
    const { documents } = useDocuments();
    return (
        <Card className='pb-7'>
            <table className="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Nom du fichier
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Catégorie
                        </th>
                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Ajouté le
                        </th>
                        <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                    {documents.map((doc) => (
                        <DocumentObject doc={doc}></DocumentObject>
                    ))}
                </tbody>
            </table>
        </Card>
    );
};

export default DocumentsWidget;