import { useState, useEffect } from 'react';
import { Typography } from 'antd';

interface SessionTimerProps {
  startedAt: string;
}

export default function SessionTimer({ startedAt }: SessionTimerProps) {
  const [elapsed, setElapsed] = useState('00:00');

  useEffect(() => {
    const start = new Date(startedAt).getTime();

    const update = () => {
      const diff = Math.floor((Date.now() - start) / 1000);
      const hours = Math.floor(diff / 3600);
      const minutes = Math.floor((diff % 3600) / 60);
      const seconds = diff % 60;

      if (hours > 0) {
        setElapsed(`${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`);
      } else {
        setElapsed(`${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`);
      }
    };

    update();
    const interval = setInterval(update, 1000);
    return () => clearInterval(interval);
  }, [startedAt]);

  return (
    <Typography.Text style={{ color: '#fff', fontFamily: 'monospace', fontSize: 14, textShadow: '0 1px 2px rgba(0,0,0,0.5)' }}>
      {elapsed}
    </Typography.Text>
  );
}
