import { ReactNode } from 'react';
import { useMediaQuery } from 'usehooks-ts';

type TailwindBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

export const DesktopOnly = ({
  showAtBreakpoint = 'md',
  children,
}: {
  showAtBreakpoint?: TailwindBreakpoint;
  children: ReactNode;
}) => {
  return <div className={`hidden ${showAtBreakpoint}:block`}>{children}</div>;
};

export const MobileOnly = ({
  hideAtBreakpoint = 'md',
  children,
}: {
  hideAtBreakpoint?: TailwindBreakpoint;
  children: ReactNode;
}) => {
  return <div className={`block ${hideAtBreakpoint}:hidden`}>{children}</div>;
};

/**
 * Renders the children ONLY if the media query passes
 */
export const MediaQueryOnly = ({
  mediaQuery,
  children,
}: {
  mediaQuery: string;
  children: ReactNode;
}) => {
  const isMediaQuery = useMediaQuery(mediaQuery);
  return isMediaQuery ? children : null;
};