import { useCountdown } from '../hooks/useCountdown';

const pad = ( n: number ): string => String( n ).padStart( 2, '0' );

/**
 * The four-unit "Up next" countdown (`.cd`). React owns the ticking values.
 * @param root0
 * @param root0.targetMs
 */
export const Countdown = ( { targetMs }: { targetMs: number } ) => {
	const { days, hours, minutes, seconds } = useCountdown( targetMs );

	return (
		<div className="cd" id="upnext">
			<div className="cd-unit">
				<b data-u="d">{ pad( days ) }</b>
				<span>days</span>
			</div>
			<div className="cd-unit">
				<b data-u="h">{ pad( hours ) }</b>
				<span>hrs</span>
			</div>
			<div className="cd-unit">
				<b data-u="m">{ pad( minutes ) }</b>
				<span>min</span>
			</div>
			<div className="cd-unit">
				<b data-u="s">{ pad( seconds ) }</b>
				<span>sec</span>
			</div>
		</div>
	);
};

/**
 * The compact "Up next" chip countdown (`.chip-cd`).
 * @param root0
 * @param root0.targetMs
 */
export const CountdownChip = ( { targetMs }: { targetMs: number } ) => {
	const { days, hours, minutes } = useCountdown( targetMs );

	return (
		<span className="chip-cd" id="upnextMin">
			{ `${ pad( days ) }d ${ pad( hours ) }h ${ pad( minutes ) }m` }
		</span>
	);
};
