import { useState, useEffect } from 'react';
import { useSleepSession } from '../../hooks/useSleepSession';
import { formatElapsedTime } from '../../utils/time';

const StatusBanner = () => {
  const { activeSession, isLoading } = useSleepSession();
  const [elapsed, setElapsed] = useState<string>('');

  useEffect(() => {
    if (!activeSession) {
      setElapsed('');
      return;
    }

    const updateElapsed = () => {
      setElapsed(formatElapsedTime(activeSession.start_time));
    };

    updateElapsed();
    const interval = setInterval(updateElapsed, 1000);
    return () => clearInterval(interval);
  }, [activeSession?.start_time]);

  if (isLoading) return <div className="p-4 text-center">Loading...</div>;

  if (activeSession) {
    return (
      <div className="bg-amber-100 text-amber-800 p-4 rounded-lg shadow-sm mb-4 flex items-center justify-center space-x-2">
        <span>Baby is sleeping 😴</span>
        {elapsed && <span className="font-mono">({elapsed})</span>}
      </div>
    );
  }

  return (
    <div className="bg-blue-100 text-blue-800 p-4 rounded-lg shadow-sm mb-4 flex items-center justify-center space-x-2">
      <span>Baby is awake 👶</span>
    </div>
  );
};

export default StatusBanner;