import { useState, useEffect } from "react";

const getRelativeTime = (date) => {
    const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
    const diff = (date - new Date()) / 1000;

    const timeUnits = [
        { unit: 'year', seconds: 31536000 },
        { unit: 'month', seconds: 2592000 },
        { unit: 'week', seconds: 604800 },
        { unit: 'day', seconds: 86400 },
        { unit: 'hour', seconds: 3600 },
        { unit: 'minute', seconds: 60 },
        { unit: 'second', seconds: 1 }
    ];

    for (const { unit, seconds } of timeUnits) {
        if (Math.abs(diff) >= seconds || unit === 'second') {
            return rtf.format(Math.round(diff / seconds), unit);
        }
    }
};

export const RelativeTime = ({ timestamp }) => {
    const [relativeTime, setRelativeTime] = useState(getRelativeTime(new Date(timestamp)));

    useEffect(() => {
        const interval = setInterval(() => {
            setRelativeTime(getRelativeTime(new Date(timestamp)));
        }, 1000);

        return () => clearInterval(interval);
    }, [timestamp]);

    return <pre className="text-xs">{relativeTime}</pre>;
};
