import { Dayjs } from 'dayjs';

interface MetricMeasureProps {
    value: string;
    measuredAt: Dayjs;
    deviceName?: string;
}

export default function MetricMeasure({
    value,
    measuredAt,
    deviceName,
}: MetricMeasureProps) {
    return (
        <li className="my-3 flex justify-between gap-4">
            <span>{value}</span>
            <span className="flex shrink-0 gap-3 text-right">
                {deviceName && (
                    <span className="text-sm text-zinc-400">{deviceName}</span>
                )}
                <span>{measuredAt.format('HH:mm:ss')}</span>
            </span>
        </li>
    );
}