import { clsx } from 'clsx';
import { useMediaQuery } from '#/lib/browser/media-query';
import { useBreakpoints } from '#/lib/hooks/use-breakpoints';
import ArrowIcon from '#/icons/central/ArrowUp_round_outlined_radius1_stroke2.svg';
import * as css from './LoadLatestBtn.css';
export function LoadLatestBtn({
onPress,
label,
showIndicator,
}: {
onPress: () => void;
label: string;
showIndicator: boolean;
}) {
const { gtMobile, gtTablet } = useBreakpoints();
// move button inline if it starts overlapping the left nav
const isTallViewport = useMediaQuery('(height >= 700px)');
return (
<div
className={clsx(
css.outer,
gtTablet && (isTallViewport ? css.leftOutOfLine : css.leftInline),
gtMobile && !gtTablet && css.leftInline,
)}
>
<button
aria-label={label}
className={clsx(css.button, showIndicator && css.indicator)}
onClick={onPress}
type="button"
>
<div className={css.hover} />
<ArrowIcon className={clsx(css.icon, showIndicator && css.iconIndicating)} />
</button>
</div>
);
}