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

export const Topbar: React.FC = () => {
  return (
    <header className="h-20 border-b border-black/5 bg-white/50 backdrop-blur-md px-12 flex items-center justify-between">
      <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-brand-dark/30">Interface de traduction</span>
      <div className="flex items-center gap-6">
        <button className="p-3 text-brand-dark/30 hover:text-brand-dark transition-colors bg-brand-muted rounded-xl"><Moon size={18} /></button>
        <div className="h-6 w-[1px] bg-black/10"></div>
        <div className="flex items-center gap-4">
            <div className="text-right">
                <p className="text-[10px] font-black uppercase leading-none">Premium Access</p>
                <p className="text-[9px] text-brand-accent font-bold uppercase tracking-widest mt-1">Status: Active</p>
            </div>
            <div className="w-10 h-10 rounded-xl bg-brand-dark flex items-center justify-center text-white text-xs font-black">SR</div>
        </div>
      </div>
    </header>
  );
};
