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">
          Painel
        </h2>

        <p className="mt-1 text-slate-400">
          Provisionamento de routers de produção
          OpenWrt 23.05 WireGuard
        </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>
            Última atualização:{' '}
            {new Date().toLocaleTimeString()}
          </span>
        </div>

        <Badge
          tone={healthy ? 'green' : 'red'}
        >
          {healthy
            ? 'Todos os sistemas operacionais'
            : 'Problemas detetados no sistema'}
        </Badge>
      </div>
    </header>
  );
}