import { type ReactNode, forwardRef } from 'react';
import { Table } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';

type ResponsiveTableContainerProps = Omit<
    React.ComponentProps<typeof Table.ScrollContainer>,
    'children'
> & {
    children: ReactNode;
};

export const ResponsiveTableContainer = forwardRef<
    HTMLDivElement,
    ResponsiveTableContainerProps
>(({ children, ...rest }, ref) => {
    const isNarrow = useMediaQuery('(max-width: 700px)');

    return isNarrow ? (
        <Table.ScrollContainer ref={ref} {...rest}>
            {children}
        </Table.ScrollContainer>
    ) : (
        <>{children}</>
    );
});

ResponsiveTableContainer.displayName = 'ResponsiveTableContainer';