import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC, JSX } from "react";
import { useTranslation } from "react-i18next";

interface Props {
	title: string;
	onClick?: () => void;
	icon?: JSX.Element;
	color?:
		| "primary"
		| "secondary"
		| "error"
		| "info"
		| "success"
		| "warning"
		| "inherit";
	variant?: "contained" | "outlined" | "text";
	disabled?: boolean;
	type?: "button" | "submit" | "reset";
	autoFocus?: boolean;
}

export const ButtonWithIcon: FC<Props> = ({
	onClick,
	icon,
	title,
	color,
	variant,
	disabled,
	type,
	autoFocus,
}) => {
	const theme = useTheme();
	const useTitle = useMediaQuery(theme.breakpoints.up("lg"));
	const { t } = useTranslation();

	return (
		<Button
			type={type}
			color={color}
			variant={variant ?? "outlined"}
			onClick={onClick}
			disabled={disabled}
			sx={{
				display: "flex",
				gap: 1,
				alignItems: "center",
			}}
			title={t(title)}
			autoFocus={autoFocus}
		>
			{icon}
			{useTitle && <Typography noWrap>{t(title)}</Typography>}
		</Button>
	);
};
