import React, { useEffect, useState } from 'react';
import { differenceInMinutes } from 'date-fns';
import { getPosition } from '../../lib/timelineUtils';

interface CurrentTimeIndicatorProps {
    startTime: Date;
    hourWidth: number;
}

const CurrentTimeIndicator: React.FC<CurrentTimeIndicatorProps> = ({ startTime, hourWidth }) => {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        const interval = setInterval(() => setNow(new Date()), 60000); // Update every minute
        return () => clearInterval(interval);
    }, []);

    // Calculate position
    const left = getPosition(now, startTime, hourWidth);

    // Only render if within visible range (roughly)
    if (differenceInMinutes(now, startTime) < 0) return null;

    return (
        <div
            className="absolute top-0 bottom-0 w-px bg-red-500 z-30 pointer-events-none"
            style={{ left }}
            id="current-time-indicator"
        >
            <div className="absolute -top-1 -left-1 w-2 h-2 bg-red-500 rounded-full" />
            <div className="absolute top-0 left-2 text-xs font-bold text-red-500 bg-white/80 px-1 rounded">
                {now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
            </div>
        </div>
    );
};

export default CurrentTimeIndicator;
