import { ArrowDownToLine, ArrowUpFromLine, Waves } from 'lucide-react';
import { TRANSMISSION_SECTIONS } from './shared';
import { formatSpeed } from './format';
import { useTransmissionSection } from './useTransmissionSection';
import { useSession, useSessionStats } from './useTransmissionData';

// Panel header for the right (transmission-view) panel: which section, which daemon version, and the live
// totals — the one number you want visible no matter which section you are looking at.

export const TransmissionViewHeader = () => {
  const section = useTransmissionSection();
  const { stats } = useSessionStats();
  const { session } = useSession();
  const label = TRANSMISSION_SECTIONS.find((s) => s.id === section)?.label ?? 'Transmission';

  return (
    <>
      <Waves className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">
        {label}
        {session?.version && <span className="ml-1.5 font-normal text-black/50">· {session.version}</span>}
      </span>
      {stats && (
        <span className="flex shrink-0 items-center gap-2 text-[10px] tabular-nums text-black/60">
          <span className="flex items-center gap-0.5">
            <ArrowDownToLine className="h-3 w-3" />
            {formatSpeed(stats.downloadSpeed) || '0'}
          </span>
          <span className="flex items-center gap-0.5">
            <ArrowUpFromLine className="h-3 w-3" />
            {formatSpeed(stats.uploadSpeed) || '0'}
          </span>
        </span>
      )}
    </>
  );
};