'use client';

import React, { ReactNode } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { MEDIA_MOBILE, MEDIA_TABLET, MEDIA_DESKTOP } from '@/constants/breakpoints';

interface MobileViewProps {
  children: ReactNode;
  mobile?: ReactNode;
  tablet?: ReactNode;
  desktop?: ReactNode;
  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
}

/**
 * Componente para renderizar views otimizadas para mobile
 * 
 * Renderiza diferentes layouts baseado no tamanho da tela
 */
export function MobileView({
  children,
  mobile,
  tablet,
  desktop,
  breakpoint: _breakpoint = 'md',
}: MobileViewProps) {
  const isMobile = useMediaQuery(MEDIA_MOBILE);
  const isTablet = useMediaQuery(MEDIA_TABLET);
  const isDesktop = useMediaQuery(MEDIA_DESKTOP);

  // Renderizar view específica se fornecida
  if (mobile && isMobile) {
    return <>{mobile}</>;
  }

  if (tablet && isTablet) {
    return <>{tablet}</>;
  }

  if (desktop && isDesktop) {
    return <>{desktop}</>;
  }

  // Renderizar children com classes responsivas
  return (
    <div
      className={`mobile-view ${
        isMobile ? 'mobile' : isTablet ? 'tablet' : 'desktop'
      }`}
    >
      {children}
    </div>
  );
}