/**
 * Capa responsive: un único punto donde se decide cómo se comporta la UI según
 * el tamaño del dispositivo (móvil vs tablet). Sin librerías externas.
 */
import { useWindowDimensions } from 'react-native';

/** Umbral de "tablet": ancho disponible >= 900dp (tablet en horizontal o grande). */
export const TABLET_BREAKPOINT = 900;

export interface Layout {
  width: number;
  height: number;
  isTablet: boolean;
  isLandscape: boolean;
  /** Columnas sugeridas para rejillas de tarjetas. */
  columns: number;
  /** Padding base de pantalla. */
  gutter: number;
}

export function useLayout(): Layout {
  const { width, height } = useWindowDimensions();
  const isLandscape = width > height;
  const isTablet = width >= TABLET_BREAKPOINT;

  let columns = 1;
  if (width >= 1200) columns = 3;
  else if (width >= TABLET_BREAKPOINT) columns = 2;

  return {
    width,
    height,
    isTablet,
    isLandscape,
    columns,
    gutter: isTablet ? 24 : 16,
  };
}
