import { useEffect, useState, type ReactNode } from 'react';
import type { NasaIconName } from '../../components/icons/NasaIcon';
import NasaIcon from '../../components/icons/NasaIcon';

type Props = {
  icon: NasaIconName;
  missionId: string;
  title: string;
  subtitle?: string;
  badges?: ReactNode;
};

function missionClock() {
  const now = new Date();
  return now.toISOString().slice(11, 19) + ' UTC';
}

export default function NasaPageHeader({ icon, missionId, title, subtitle, badges }: Props) {
  const [clock, setClock] = useState(missionClock);

  useEffect(() => {
    const id = setInterval(() => setClock(missionClock()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <header className="nasa-header mb-6">
      <div className="nasa-header__meta">
        <span className="nasa-mission-id">
          <NasaIcon name="satellite" size={12} />
          {missionId}
        </span>
        <span>MET {clock}</span>
      </div>
      <div className="nasa-header__body">
        <div className="nasa-header__title-row">
          <div className="nasa-header__icon-wrap">
            <NasaIcon name={icon} size={26} className="nasa-icon--telemetry" />
          </div>
          <div>
            <h1 className="nasa-title">{title}</h1>
            {subtitle && <p className="dash-page-subtitle !mt-1">{subtitle}</p>}
          </div>
        </div>
        {badges && <div className="flex flex-wrap items-center gap-2">{badges}</div>}
      </div>
    </header>
  );
}
