Craze-Data-check/src/components/TopBar.tsx

import React from 'react';
import { Download, Database, LogOut } from 'lucide-react';

interface TopBarProps {
  stats: any;
  onExport: () => void;
  hasData: boolean;
  hasUnsavedChanges: boolean;
  userEmail?: string;
  onSignOut?: () => void;
}

export function TopBar({ stats, onExport, hasData, hasUnsavedChanges, userEmail, onSignOut }: TopBarProps) {
  return (
    <header className="bg-slate-800 border-b border-slate-700 h-16 flex items-center justify-between px-6 shrink-0 z-10">
      <div className="flex items-center gap-3">
        <Database className="text-blue-500 w-6 h-6" />
        <h1 className="text-xl font-bold text-white tracking-tight">CRAZE Product Data Quality Manager</h1>
      </div>

      {stats && (
        <div className="flex items-center gap-4 text-xs font-medium">
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Total</span>
            <span className="bg-slate-700 text-white px-2 py-0.5 rounded mt-1">{stats.total}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing DE Long</span>
            <span className="bg-red-500/20 text-red-400 px-2 py-0.5 rounded border border-red-500/30 mt-1">{stats.missingDeLong}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing EN Long</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnLong}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing DE Short</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingDeShort}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Missing EN Short</span>
            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnShort}</span>
          </div>
          <div className="flex flex-col items-center">
            <span className="text-slate-400">Fully Complete</span>
            <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded border border-green-500/30 mt-1">{stats.fullyComplete}</span>
          </div>
        </div>
      )}

      <div className="flex items-center gap-3">
        {hasData && (
          <button
            onClick={onExport}
            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              hasUnsavedChanges
                ? 'bg-blue-600 hover:bg-blue-700 text-white'
                : 'bg-slate-700 hover:bg-slate-600 text-slate-200'
            }`}
          >
            <Download className="w-4 h-4" />
            Export Updated Excel
            {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
          </button>
        )}
        {userEmail && (
          <div className="flex items-center gap-2 border-l border-slate-700 pl-3">
            <span className="text-xs text-slate-400">{userEmail}</span>
            <button
              onClick={onSignOut}
              title="Sign out"
              className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
            >
              <LogOut className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
    </header>
  );
}