import { FC, PropsWithChildren } from "react";
import {
    ActionIcon,
    ActionIconProps,
    PolymorphicComponentProps,
    Tooltip,
} from "@mantine/core";
import useIsMobile from "@/hooks/utils/useIsMobile";
import style from "./ActionIconWithTip.module.css";

type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
    tipLabel?: string;
};

const ActionIconWithTip: FC<PropsWithChildren<Props>> = ({
    children,
    tipLabel,
    ...props
}) => {
    const isMobile = useIsMobile();

    return (
        <Tooltip
            label={tipLabel}
            hidden={!tipLabel}
            h={"max-content"}
            w={"max-content"}>
            <ActionIcon
                variant={isMobile ? "subtle" : "default"}
                radius={"lg"}
                className={style.container}
                {...props}>
                {children}
            </ActionIcon>
        </Tooltip>
    );
};

export default ActionIconWithTip;
