import {
  RefreshCw,
  ShieldCheck,
  ShieldX,
} from 'lucide-react';

type TopBarProps = {
  healthy?: boolean;
};

export function TopBar({
  healthy = false,
}: TopBarProps) {
  return (
    <header
      className="
        mb-4 flex flex-col gap-4 rounded-3xl border border-white/10
        bg-white/[0.025] px-4 py-4
        lg:mb-6 lg:flex-row lg:items-center lg:justify-between lg:px-5
      "
    >
      <div className="min-w-0">
        <div className="flex items-start gap-3">
          <div
            className={`shrink-0 rounded-2xl p-3 ${
              healthy
                ? 'bg-emerald-500/10 text-emerald-300'
                : 'bg-red-500/10 text-red-300'
            }`}
          >
            {healthy ? (
              <ShieldCheck size={22} />
            ) : (
              <ShieldX size={22} />
            )}
          </div>

          <div className="min-w-0">
            <h2
              className="
                truncate text-2xl font-black tracking-tight text-white
                xl:text-3xl
              "
            >
              Painel
            </h2>

            <p
              className="
                mt-1 max-w-3xl text-xs leading-5 text-slate-400
                sm:text-sm
              "
            >
              Provisionamento de routers OpenWrt 23.05
              com WireGuard e UDP2RAW
            </p>
          </div>
        </div>
      </div>

      <div
        className="
          flex flex-wrap items-center gap-3
          lg:justify-end
        "
      >
        <div
          className="
            flex items-center gap-2 rounded-2xl
            border border-white/10 bg-black/20
            px-3 py-2 text-xs text-slate-400
            sm:px-4 sm:text-sm
          "
        >
          <RefreshCw
            size={15}
            className="shrink-0"
          />

          <span className="whitespace-nowrap">
            Atualizado às{' '}
            <span className="font-mono text-slate-200">
              {new Date().toLocaleTimeString()}
            </span>
          </span>
        </div>

        <div
          className={`rounded-2xl border px-3 py-2 text-xs font-bold sm:px-4 sm:text-sm ${
            healthy
              ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-300'
              : 'border-red-500/20 bg-red-500/10 text-red-300'
          }`}
        >
          {healthy
            ? 'Sistemas operacionais'
            : 'Atenção necessária'}
        </div>
      </div>
    </header>
  );
}