components/Layout.js

import { ShieldCheck } from 'lucide-react';

export default function Layout({ children }) {
  return (
    <div className="flex flex-col h-screen w-full bg-telegram-bg text-telegram-text">
      {/* Header */}
      <header className="h-14 flex items-center justify-between px-4 bg-telegram-sidebar border-b border-gray-800 shadow-md z-10 shrink-0">
        <div className="flex items-center gap-2">
          <ShieldCheck className="text-telegram-accent encrypted-icon" size={24} />
          <h1 className="font-bold text-lg tracking-wide">SecureChat</h1>
        </div>
        <a 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank" 
          rel="noopener noreferrer"
          className="text-xs text-telegram-secondary hover:text-telegram-accent transition-colors flex items-center gap-1 bg-white/5 px-2 py-1 rounded-full"
        >
          Built with anycoder
        </a>
      </header>

      {/* Main Content Area */}
      <main className="flex-1 flex overflow-hidden relative">
        {children}
      </main>
    </div>
  );
}