import { ReactNode } from 'react';
import { useIsMobile, useIsTablet, useIsDesktop } from '../../hooks/useResponsive';

interface ResponsiveContainerProps {
  children: ReactNode;
  className?: string;
  mobileClass?: string;
  tabletClass?: string;
  desktopClass?: string;
}

/**
 * Conteneur responsive qui applique des classes CSS différentes selon l'appareil
 */
export function ResponsiveContainer({
  children,
  className = '',
  mobileClass = '',
  tabletClass = '',
  desktopClass = ''
}: ResponsiveContainerProps) {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();
  const isDesktop = useIsDesktop();

  let responsiveClass = className;

  if (isMobile && mobileClass) {
    responsiveClass += ` ${mobileClass}`;
  } else if (isTablet && tabletClass) {
    responsiveClass += ` ${tabletClass}`;
  } else if (isDesktop && desktopClass) {
    responsiveClass += ` ${desktopClass}`;
  }

  return (
    <div className={responsiveClass.trim()}>
      {children}
    </div>
  );
}