import { useState, useEffect } from 'react';
import type { AccidentType } from '@/types/rescue/RescueType';
import { rscTypeData } from '../RescueView';

export function TopInfoBar({ activeType }: { activeType: AccidentType }) {
  const d = rscTypeData[activeType];
  const [clock, setClock] = useState('');
  useEffect(() => {
    const tick = () => {
      const now = new Date();
      setClock(
        `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')} KST`,
      );
    };
    tick();
    const iv = setInterval(tick, 1000);
    return () => clearInterval(iv);
  }, []);

  return (
    <div className="h-9 bg-bg-base border-b border-stroke flex items-center px-4 gap-3.5 flex-shrink-0">
      <div className="flex items-center gap-1.5">
        <span className="text-title-3">⚓</span>
        <span className="text-label-1 font-bold text-fg font-korean">긴급구난지원</span>
      </div>
      <div className="flex items-center gap-1.5 text-label-2 text-color-danger font-korean">
        {/* <span className="w-2.5 h-2.5 rounded-sm bg-color-danger inline-block" /> */}
        사고: {d.incident}
      </div>
      <div className="flex gap-3 text-caption font-mono text-fg-disabled ml-auto">
        <span>
          생존자: <span className="text-fg">{d.survivors}</span>/{d.total}
        </span>
        <span>
          실종: <span className="text-fg">{d.missing}</span>
        </span>
        <span>
          GM: <span className="text-fg">{d.gm}m</span>
        </span>
        <span>
          횡경사: <span className="text-fg">{d.list}°</span>
        </span>
        <span>
          유출량: <span className="text-fg">{d.oilRate}</span>
        </span>
      </div>
      <div className="text-title-4 font-bold text-fg font-mono">{clock}</div>
      <div className="text-caption text-fg-disabled font-korean">👤 Cmdr. KIM</div>
    </div>
  );
}
