import { Button, Tooltip } from "@digdir/designsystemet-react";
import type { ReactNode } from "react";

interface Props {
	icon: ReactNode;
	label: string;
	onClick: () => void;
	disabled?: boolean;
	isSmall: boolean;
}

/** Renders a labelled button on large screens and a tooltipped icon button on small ones. */
export function ResponsiveButton({ icon, label, onClick, disabled, isSmall }: Props) {
	if (isSmall) {
		return (
			<Tooltip content={label}>
				<Button icon variant="tertiary" data-size="sm" aria-label={label} onClick={onClick} disabled={disabled}>
					{icon}
				</Button>
			</Tooltip>
		);
	}

	return (
		<Button variant="tertiary" data-size="sm" onClick={onClick} disabled={disabled}>
			{icon}
			{label}
		</Button>
	);
}