import { Input } from '@/components/ui/Input';
import PageHeader from '@/components/ui/PageHeader';
import DocumentsWidget from '@/components/widgets/DocumentsWidget';
import { useState } from 'react';

export default function DocumentVault() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div className="font-sans relative min-h-[calc(100vh-4rem)]">

      {/* Contenu Principal */}
      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
        <PageHeader
          title='Coffre-Fort Documentaire'
          description='Espace de stockage chiffré de bout en bout'>
        </PageHeader>

        {/* Barre de recherche (Visuelle) */}
        <Input
          type="text"
          placeholder="Rechercher un document, une facture..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />

        {/* Liste des Documents (La Carte) */}
        <DocumentsWidget></DocumentsWidget>
      </main>
    </div >
  );
}