import React from 'react';
import { Library } from 'lucide-react';

export const GlossaryMainView: React.FC = () => {
  return (
    <div className="max-w-6xl mx-auto">
      <div className="flex justify-between items-end mb-12">
        <div>
          <span className="accent-pill mb-4 block w-fit">Bibliothèque</span>
          <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Mes Glossaires</h1>
          <p className="text-brand-dark/40 font-medium">Gérez vos listes de terminologies personnalisées.</p>
        </div>
        <button className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl">+ Nouveau glossaire</button>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        {[
          { name: 'Technique HVAC', count: 124, date: '12 Mai 2026', type: 'Ingénierie' },
          { name: 'Marketing Digital', count: 45, date: '10 Mai 2026', type: 'Communication' },
          { name: 'Contrats Vente', count: 89, date: '08 Mai 2026', type: 'Juridique' },
        ].map((g, i) => (
          <div key={i} className="editorial-card p-8 bg-white border-none shadow-editorial group hover:-translate-y-2 transition-all">
             <div className="flex justify-between items-start mb-10">
               <div className="w-12 h-12 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark group-hover:text-white transition-all">
                 <Library size={24} />
               </div>
               <span className="text-[8px] bg-brand-accent/10 text-brand-accent px-3 py-1 rounded-full font-black uppercase tracking-widest">{g.type}</span>
             </div>
             <h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark">{g.name}</h3>
             <div className="flex justify-between items-center pt-8 border-t border-black/5">
                <span className="text-[9px] text-brand-dark/30 font-black uppercase tracking-widest">{g.count} termes</span>
                <span className="text-[9px] text-brand-dark/30 font-black uppercase tracking-widest">{g.date}</span>
             </div>
          </div>
        ))}
      </div>
    </div>
  );
};
