import React from 'react';
import { useVideo } from './VideoContext';
import { Text } from '../Text/Text';

const formatTime = (time: number) => {
    if (isNaN(time)) return '0:00';
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60).toString().padStart(2, '0');
    return `${minutes}:${seconds}`;
};

export const VideoTime: React.FC<{ className?: string }> = ({ className }) => {
    const { currentTime } = useVideo();
    return <Text as="span" className={className}>{formatTime(currentTime)}</Text>;
};
