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

export const ApiKeysView: React.FC = () => {
  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-12">
        <span className="accent-pill mb-4 block w-fit">Accès API</span>
        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Clés API</h1>
        <p className="text-brand-dark/40 font-medium">Intégrez Office Translator directement dans vos outils.</p>
      </div>

      <div className="editorial-card p-12 bg-white border-none shadow-editorial">
         <div className="flex items-center justify-between p-8 bg-brand-muted rounded-3xl border border-black/5">
           <div>
             <p className="text-[9px] text-brand-dark/40 font-black uppercase tracking-[0.3em] mb-2">Clé de production</p>
             <p className="text-sm font-mono text-brand-dark">sk_live_************************************</p>
           </div>
           <div className="flex gap-3">
             <button className="p-3 bg-white rounded-xl text-brand-dark/40 hover:text-brand-dark border border-black/5 transition-all"><Clock size={16}/></button>
             <button className="px-6 py-3 bg-brand-dark text-white rounded-xl text-[9px] font-black uppercase tracking-widest">Révéler</button>
           </div>
         </div>
      </div>
    </div>
  );
};
