import { RefreshCw } from 'lucide-react';

import { Badge } from '@/components/ui/Badge';

type TopBarProps = {
  healthy?: boolean;
};

export function TopBar({
  healthy = false,
}: TopBarProps) {
  return (
    <header className="mb-6 flex items-center justify-between">
      <div>
        <h2 className="text-3xl font-bold tracking-tight text-white">
          Dashboard
        </h2>

        <p className="mt-1 text-slate-400">
          OpenWrt 23.05 WireGuard
          production router provisioning
        </p>
      </div>

      <div className="flex items-center gap-4 text-sm text-slate-400">
        <div className="flex items-center gap-2">
          <RefreshCw size={16} />

          <span>
            Last updated:{' '}
            {new Date().toLocaleTimeString()}
          </span>
        </div>

        <Badge
          tone={healthy ? 'green' : 'red'}
        >
          {healthy
            ? 'All Systems Operational'
            : 'System Issues Detected'}
        </Badge>
      </div>
    </header>
  );
}